美文网首页vuevue3
vue路由 history模式 nginx配置

vue路由 history模式 nginx配置

作者: 陶菇凉 | 来源:发表于2022-09-14 09:06 被阅读0次
    • 如果路由要使用history模式,需要将nigix配置为:

    1.前端配置:

    const router = new VueRouter({
      mode: "history",
      routes,
    });
    

    2.nigix配置

    server {
    
            listen      9903;
            server_name  localhost;
    
            location / {
    
                root  '/root/static';
    
                index  /index.html;
    
                try_files $uri $uri/ /index.html;
            }
    }
    
    • 如果路由要使用history模式,并且想要一个根目录下面挂多个站点

    1.前端配置路由:

    const router = new VueRouter({
    
      mode: "history",
    
      base: "/one/",
    
      routes,
    
    });
    

    2.修改vue.config.js 的 publicPath 为自己的二级目录即可

    module.exports = {
    
      publicPath: "/one/",
    
    };
    

    3.配置服务器nigx代码:

    server {
    
     listen      9903;
     server_name  localhost;
      root  '/root/static';
    
    //这个是通过localhost:9903/aabb/可以访问
    location /aabb {
    
    index  /index.html;
    
    try_files $uri $uri/ /aabb/index.html;
    
    }
    
    //这个是通过localhost:9903/one/可以访问
    
    location /one {
       index  /index.html;
       try_files $uri $uri/ /one/index.html;
     }
    }
    

    相关文章

      网友评论

        本文标题:vue路由 history模式 nginx配置

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