Vue项目打包部署后页面空白,无报错
问题描述:基于vue-cli 4.3.1的项目打包后,如果部署在域名的根路径下,页面显示正常,但是如果部署在域名的子路径下,打开页面后页面空白,无报错?原因:归根结底是因为打开页面后没有匹配到任何一个路由,也就是设置在router里的路径没有任何一个被匹配到,包括其中设置的path:"/"这个路径,因此也就无法加载对应的组件,所以显示一片空白;官网原文:vue-router默认使用的是hash模式
·
问题描述:
基于vue-cli 4.3.1的项目打包后,如果部署在域名的根路径下,页面显示正常,但是如果部署在域名的子路径下,打开页面后页面空白,无报错?
原因:
归根结底是因为打开页面后没有匹配到任何一个路由,也就是设置在router里的路径没有任何一个被匹配到,包括其中设置的path:"/"这个路径,因此也就无法加载对应的组件,所以显示一片空白;
官网原文:vue-router默认使用的是hash模式,如果要改成history模式,需要在router中将模式改成history,也就是
const router = new VueRouter({
mode: 'history',
routes: [...]
})
问题在于,如果设置了history了,那么路径将无法被识别,因此需要后台支持,具体请到官网查询“HTML5 History 模式”一栏;
解决:
方法一:将history模式改回hash模式,也就是将mode:"history"注销;
方法二:按官网提出的方案,请后台工程师新增一个匹配,当没有资源被匹配到时,将原本应该返回的404页面改为指向index.html,也就是如果匹配不到任何资源,就指向index.html,这样就可以匹配上了;
更多推荐
已为社区贡献14条内容
所有评论(0)