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

  • 相关阅读:
    springMVC+freemarker中Could not resolve view with name... 问题解决
    mybatis中if test 语句 当参数类型为string时,如何写判断条件
    博科交换机升级FOS系统
    response.redirect 和Server.Transfer 的区别
    win7 安装MyGeneration版本,没有安装mdac的解决办法
    Zen Cart的sidebox机制
    ASPCMS相册 实现每张图片对应一段文字
    ZEN CART 系统想在首页调用 新闻插件 的 新闻列表的方法
    JS获得来源页
    zen cart去掉zenid的简单方法
  • 原文地址:https://www.cnblogs.com/zshno1/p/12147442.html
Copyright © 2011-2022 走看看