使用Vue-Cli的踩坑笔记

1. 使用webpack创建Vue项目

最开始我是用vue ui来创建一个Vue项目结构的，发现这样得到的目录结构和网上教程的结构不一样，没有config文件夹，对于开发环境和生产环境的设置都不方便，于是使用webpack来创建Vue项目。

使用vue init webpack 项目名指令来创建一个Vue项目。

有可能使用上述命令后会遇到这个错误：

1 2	Command vue init requires a global addon to be installed. Please run npm install -g @vue/cli-init and try again.

意思是如果你要使用命令vue init还需在全局下安装cli-init。
安装cli-init cnpm install -g @vue/cli-init

就可以得到一个如下目录的Vue项目啦

执行npm run dev在本地启动项目。

最开始新建项目的时候把项目名取错了😅（不是文件夹名称😭）。修改的话需要改package.json和index.html中的项目名，然后在项目根目录下执行cnpm i重新安装依赖就🆗了。

之前写过一篇博客记录了跨域的问题——解决Vue使用Api时的跨域问题。这样只能在开发环境中解决跨域问题，项目打包后是不起作用的。而且不在目前的项目结构中适用🎈。

打开 config - index.js，将下面代码添加到proxyTable中

'/api': {
  target: 'api地址',
  // 允许跨域
  changeOrigin: true,
  ws: true,
  pathRewrite: {
      '^/api': ''
  }
}

项目打包后，Vue-Cli就不起作用了，自然之前配置的代理也就无效了。一般解决生产环境跨域问题是使用nginx配置代理，因为我这里没有部署到服务器上😐，所以采用生产环境将调用Api链接补全的方式解决这个问题（治标不治本😭）

在main.js中设置一个全局函数

1
2
3

Vue.prototype.getUrl = () => {
  return process.env.NODE_ENV === 'production' ? 'api地址' : '/api/'
}

调用Api时链接格式为this.getUrl() + '后续链接'

这样就可以根据当前环境拿到不同的链接了。

执行npm run build将项目打包，打包后的文件在项目根目录下dist文件内。

启动打包后的项目发现浏览器中什么内容也没有😣。可以将 config - index.js 中build下assetsPublicPath的值改为./，让它从打包后的当前路径下寻找资源，而不是根目录。

打包后发现使用的element-UI部分样式丢失，这同样也是路径的问题。打开 build - util.js, 添加如下代码

这里要使用element-UI还需要在main.js中引入对应的CSS样式 import 'element-ui/lib/theme-chalk/index.css'

把favicon.ico放在项目根目录中，build文件夹下的webpack.dev.conf.js和webpack.prod.conf.js都做如下修改即可