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

问题出现原因:

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模式下,可能需要改成相对路径,目前我没测试过。

猜你喜欢

转载自www.cnblogs.com/zshno1/p/12147442.html
今日推荐