美文网首页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