vue刷新页面空白分两种情况

Posted 2021-03-18 zshno1

问题出现原因：

1.在history模式下的404空白

2.在history模式下存在多级路由时，页面路由跳转是ok的，但当二级以上路由时，浏览器直接刷新页面会空白

 

 

先说解决方案：

1.在history模式下的404空白 * 后台或者nignx服务器发现404时，直接重定向到index.html就可以解决

2.在history模式下存在多级路由时，页面路由跳转是ok的，但当二级以上路由时，浏览器直接刷新页面会空白 * 如果你是老的vue项目，找到publicPath:""改成publicPath:"/" * 如果你是最新的vue脚手架搭建的，在项目中找到这个文件node_modules/@vue/cli-service/lib/options.js，然后把里面的baseUrl:""改成baseUrl:"/"就可以了 备注：修改完配置记得重新启动下开发模式 ?

原因：

1.在history模式下的404空白 * 这种网上已经说了很多了，你在history模式下时，你会发现这种url方式你直接回车，它是会以http get方式请求后台，但是后台没有你这个请求路径，所以会报404，而这个路径是前台自己定义的，所以要由前台处理，因为vue单页面应用，所以它只有一个页面index.html，所以一旦后台或者nignx 404了，就让它重定向到index.html，这样前台获取了这个路径，它就会根据自己路由来处理了

2.在history模式下存在多级路由时，页面路由跳转是ok的，但当二级以上路由时，浏览器直接刷新页面会空白 * 当二级以上路由刷新时，浏览器控制台只会报错误，没有具体原因，这时你看network中静态资源请求，如果你的二级路由是“/system/permisson”，这时你会发现静态资源请求路径变成了”/system/app.js“，而静态资源实际上是“/app.js”才能找到，这是因为静态资源访问路径是按照相对路径访问的，你的路由如果是“/A/B/C”，静态资源加载路径就是/A/B/app.js * 这时候可能疑惑，我根本没设置过这个路径，那是因为webpack配置上给你设置了。

a.如果是vue老项目，你找配置文件中的publicPath这个属性，会发现是publicPath:""空字符串，所有的静态资源把publicPath路径组合起来相当于“./app.js”，这时我们需要把这里改成publicPath:"/"，所有的静态资源把publicPath路径组合起来相当于“/app.js”，从根路径开始，这样无论你在几级路由，都是从根路径加载

b.如果你是新的vue项目，你会发现没有配置publicPath的地方，因为新的vue项目publicPath是获取baseUrl字段的值，所以在这个路径下node_modules/@vue/cli-service/lib/options.js把baseUrl:""改成baseUrl:"/" ?

注意：hash模式下，可能需要改成相对路径，目前我没测试过。