VueCli3.0项目打包

前言

当我们开发完项目后，需要将项目部署到服务器上。这时，我们就需要对项目进行打包了，生成纯HTML、CSS和JS文件了。

一般的，我们进行项目打包时只需要在命令行运行 npm run build 就可以进行项目打包了。但是如果不进行一些配置的话。我们就会遇到运行打包好的 index.html 文件，页面是全部空白的情况。这时，我们只需要进行下列设置即可：

第一种错误：

这个错误是因为没有在webpack 的配置文件里进行项目静态文件路径进行设置，导致加载资源失败。因此，我们需要对webpack 的配置文件进行修改添加以下代码：

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir:'static'
}

注意: VueCli3.0 没有的webpack.js 的配置文件。所以进行配置时需要手动添加一个vue.config.js 文件，
并在添加以上代码即可。也就是说，在VueCli3.0 里webpack.js 文件被替换成了vue.config.js 文件。

进行到这里。如果你再次打包运行 index.html 文件， 可能你将还是会看到一个完全空白的页面。但是控制台的报错信息已经没有了。

第二种错误：

VueRouter的mode 配置：

   VueRouter 有两种模式。一种是Hash模式（默认的模式）。在该模式下，会自动在url 添加‘#/’。另一种是
History 模式。History 模式就并不会自动添加‘#/’。因此，为了好看，有人就会手动设置为History模式。但是
呢！我们在development 环境中设置使用没有问题。而如果我们打包时也使用这个模式那就需要对服务器进行配置才能
正常使用。如果没有后台服务器的配合，我们打开的页面就全是空白的。所以，这就是第二个bug的原因所在。

最简单的解决方法当然是把VueRouter mode 设置为Hash模式。如果一定要使用History模式，可以参考官网给出方法：History 模式后端配置方法