vue打包的坑、打包部署后页面空白，且无报错、路由报错、路径、懒加载_vue项目部署到服务器上,页面空白

---

1、页面空白，且无报错

描述
基于vue-cli的项目打包后，如果部署在域名的根路径下，页面显示正常，但是如果部署在域名的子路径下，打开页面后页面空白，且无报错。
原因
因为打开页面后没有匹配到任何一个路由，也就是设置在router里的路径没有任何一个被匹配到，包括其中设置的path: '/'这个路径，因此也就无法加载对应的组件，所以显示一片空白。
vue-router默认使用的是history模式，打包时需要改成hash模式即可。可在router文件夹下的index.js文件中修改。

☺☺☺☺☺☺☺

const router = new VueRouter({
	mode: 'hash',
	routes: [...]
});
1
2
3
4

---

2、路由报错

ChunkLoadError: Loading chunk 12 failed

问题原因

模块加载错误，公共路径问题或使用了路由懒加载。

解决方案一

把vue.config.js文件中的公共路径由相对路径改成绝对路径publicPath: '/'更改为publicPath: './'。

解决方案二

取消懒加载。