vue打包后空白页的问题

注意：本人使用的是vue2的版本，vue3的问题不一定能够解决（本人没有尝试过）

在vue的目录下使用npm run build进行打包，目录如下

理论来说，直接打开index.html是可以直接打开网页的，如下：

如果打开页面是空白，一般有两个问题解决：

我们只需要在和package.json同级的地方新增一个vue.config.js文件，将路径修改为相对路径'./'

// vue.config.js
module.exports = {
    publicPath: './',
}

第二个问题就行 路由模式 hash 

改一下路由模式，找到router/index.js文件, 将history修改为hash, 再进行打包

// router/index.js
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

便能解决问题

扩展 路由模式

路由的hash和history模式的区别

1. 首先hash模式url带#号，history不带#号
2. hash模式前端路由修改的是hash值(#及以后)，对后端没影响，因此改变hash也不会重新加载页面，比如修改为了不存在的#123页面，页面不会跳转; history模型刚好相反，没有对应的页面就会出现404

打包路由选择

• 前端测试用 hash 模式
• 项目上线不想要url带#号的话使用history模式，不过使用history模式需要与后端沟通，需后端配置

在这里也就解释了为什么要更改路由模式。（doge）