zoukankan      html  css  js  c++  java
  • 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模式下,可能需要改成相对路径,目前我没测试过。

  • 相关阅读:
    火狐插件火狐黑客插件将Firefox变成黑客工具的七个插件
    memcache安装环境:WINDOWS 7
    PHP正则表达式
    968. 监控二叉树 力扣(困难) dfs 官方说DP
    375. 猜数字大小 II 力扣(中等) 区间动态规划、记忆化搜索
    629. K个逆序对数组 力扣(困难) 区间动态规划
    剑指 Offer 51. 数组中的逆序对 力扣(困难) 巧用归并排序算法
    488. 祖玛游戏 力扣(困难) dfs
    16. 最接近的三数之和 力扣(中等) 双指针
    319. 灯泡开关 力扣(中等) 数论
  • 原文地址:https://www.cnblogs.com/zshno1/p/12147442.html
Copyright © 2011-2022 走看看