vue路由 history模式 nginx配置

  • Post author:
  • Post category:vue




1. 如果路由要使用history模式,需要将nigix配置为:

1.前端配置:

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes,
});

2.nigix配置

server {
        listen      9903;
        server_name  localhost;
        location / {
            root  'G:\dist';
            index  /index.html;
            try_files $uri $uri/ /index.html;
        }
}



2.如果路由要使用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  'G:\dist';
    //这个是通过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;
    }
}