vue打包的坑、打包部署后页面空白,且无报错、路由报错、路径、懒加载

文章目录

  • 1、页面空白,且无报错
  • 2、路由报错


1、页面空白,且无报错

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

☺☺☺☺☺☺☺

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

2、路由报错

ChunkLoadError: Loading chunk 12 failed

问题原因

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

解决方案一

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

解决方案二

取消懒加载。

你可能感兴趣的:(Vue,JavaScript,web,vue.js,javascript,前端)