vue-cli 3 打包生产后报错的原因

vue-cli 3  和 vue-cli 2.x的区别差别非常大，基本上是从架构上的变更。所以网上查到很多解决报错的方式都不适用了。

今天总结一下自己遇到的报错问题以及是如何解决的。

一、页面空白，而且控制台提示资源404，如下图所示：

解决方法：在根目录下新建 vue.config.js 并写入如下配置：

module.exports = {
  publicPath: "./"
};

重新执行打包命令即可。

二、如果页面仅仅空白，控制台无报错。

解决方法：找到 src/router/index.ts 文件，将路由模式改为 hash 模式。

const router = new VueRouter({
  mode: "hash", // 就是这里
  base: process.env.BASE_URL,
  routes
});

重新执行打包命令即可。