vue路由 history模式 nginx配置

最新推荐文章于 2024-04-02 16:15:50 发布

習慣-學習

最新推荐文章于 2024-04-02 16:15:50 发布

阅读量5.2k

点赞数

文章标签： vue.js nginx 前端

原文链接：https://zhuanlan.zhihu.com/p/342011807#:~:text=%E5%A6%82%E6%9E%9C%E8%B7%AF%E7%94%B1%E8%A6%81%E4%BD%BF%E7%94%A8history%E6%A8%A1%E5%BC%8F%EF%BC%8C%E9%9C%80%E8%A6%81%E5%B0%86nigix%E9%85%8D%E7%BD%AE%E4%B8%BA%EF%BC%9A%201.%E5%89%8D%E7%AB%AF%E9%85%8D%E7%BD%AE%E

版权

vue专栏专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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;
    }
}