脚手架搭建vue-cli项目问题总结

vue-cli作为前端开发中常用的脚手架工具，极大地简化了项目的搭建过程，提高了开发效率。然而，在使用脚手架的过程中，难免会遇到一些问题。本文将总结我在利用脚手架搭建项目过程中所遇到的一些问题，比如stylus安装出错，rem插件配置不起作用等，持续更新。

1. stylus安装出错

在安装stylus时，可能会遇到如下错误：

npm install -g stylus

gyp: No Xcode or CLT version detected!

这是因为stylus依赖于node-gyp，而node-gyp又依赖于Xcode或CLT。解决方法是安装Xcode或CLT。

2. rem插件配置不起作用

在使用rem插件时，可能会遇到如下错误：

./node_modules/postcss-pxtorem/index.js

Module build failed: Error: ENOENT: no such file or directory, open '/Users/用户名/.postcssrc.js'

这是因为postcss-pxtorem插件需要一个配置文件.postcssrc.js。解决方法是创建.postcssrc.js文件，并添加如下内容：

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 37.5,
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: [],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    })
  ]
}

3. webpack-dev-server启动失败

在运行webpack-dev-server时，可能会遇到如下错误：

./node_modules/webpack-dev-server/client/index.js

Module not found: Error: Can't resolve 'webpack/hot/dev-server' in '/Users/用户名/项目名/node_modules/webpack-dev-server/client'

这是因为webpack-dev-server依赖于webpack/hot/dev-server，而webpack/hot/dev-server又依赖于webpack。解决方法是安装webpack。

4. 浏览器无法访问本地服务器

在运行webpack-dev-server后，可能会遇到浏览器无法访问本地服务器的情况。这是因为webpack-dev-server默认使用的是127.0.0.1作为本地服务器的IP地址，而浏览器无法访问127.0.0.1。解决方法是将webpack-dev-server的IP地址设置为0.0.0.0。

5. 生产环境打包失败

在运行npm run build时，可能会遇到生产环境打包失败的情况。这是因为生产环境打包需要使用到的依赖库与开发环境不同。解决方法是安装生产环境所需的依赖库。

以上是我在利用脚手架搭建项目过程中遇到的部分问题，希望对大家有所帮助。如果您在使用脚手架搭建项目时遇到了其他问题，欢迎在评论区留言，我会及时解答。