vue路由在多级页面下,页面刷新空白

项目当中,路由模式不设置时,默认的是hash。这时,项目开发完成进行打包,打开index.html文件后,页面显示空白页面,无报错,经过百度查找,说是路径问题,需要修改config/index.js文件,将assetsPublicPath的值改为assetsPublicPath: './'

修改之后,的确查看index.html文件页面都显示正常了。
后面发现hash模式路径会带上#,不太好看,于是将hash改为history模式。(hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。)
在hash模式下,前端路由修改的是#中的信息,而浏览器请求时不会将 # 后面的数据发送到后台,所以没有问题。但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,则会刷新出来404页面。
history应用于浏览器的历史记录。

因此,使用history后,二级页面的路径根目录变为当前路径,导致当前的请求路径发现改变,请求css,js以及图片发生404。

解决方法:hash模式下,如需打包后看到index.html页面不变成空白可以修改assetsPublicPath的路径。
history模式下,则需要将assetsPublicPath的值改为assetsPublicPath: '/'

你可能感兴趣的:(vue路由在多级页面下,页面刷新空白)