美文网首页
vue项目使用history路由,并部署到二级目录

vue项目使用history路由,并部署到二级目录

作者: 郭子web | 来源:发表于2020-08-24 17:54 被阅读0次

    今天遇到一个问题,vue项目需要用微信授权,但是微信授权之后回调回来的页面会把vue项目的hash路由的#搞乱,导致路由不正确,于是就想改成history路由模式,然后跟后台的哥们商量了一下,让他们改了一下配置,于是改成了

    location / {
      root /data/web;
      index index.html index.htm;
      try_fiels $uri $uri/ /index.html
    }
    

    然后试了一下不行,查找了一下前端也需要更改publicPath: './'改成publicPath: '/zb' // zb是二级目录,路由文件改成

    const router = new VueRouter({
      mode: 'history',
      // base: process.env.BASE_URL,
      base: '/zb/', // zb是二级目录
      routes
    })
    

    完成之后,项目打包发布,首页成功访问到,跳转到二级页面也没有问题,但是二级页面刷新访问不到,查看资料,然后修改ngnix配置

    location / {
      root /data/web;
      index index.html index.htm;
      try_fiels $uri $uri/ /zb/index.html // 这行增加子目录
    }
    

    然后项目完美运行

    相关文章

      网友评论

          本文标题:vue项目使用history路由,并部署到二级目录

          本文链接:https://www.haomeiwen.com/subject/sfonjktx.html