vite nginx 实现同端口部署多个vue项目

itwlz

已于 2023-01-09 23:06:30 修改

阅读量904

点赞数 2

文章标签： nginx vue.js 运维

于 2023-01-09 23:05:28 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45610943/article/details/128622352

版权

一、修改路由index.js

const router = createRouter({
    // history: createWebHistory("/"),
    history: createWebHistory("/admin/"),
    routes,
});

验证：本地运行后缀有自动加上/admin

在这里插入图片描述

二、修改vite.config.js

export default defineConfig({
  base: "/admin/",
})

验证：查看打包后的index.html。如果js资源有admin前缀即可

在这里插入图片描述

三、修改nginx配置

        location / {
            root   /www/server/bishe/vite-pc/dist;
            index  index.html index.html;
            try_files $uri $uri/ /index.html; 
        }
         location /admin {
            alias   /www/server/bishe/togeter/;
            try_files $uri $uri/ /admin/index.html;
            index  index.html index.htm;
        }
        //注意事项：
        //1. 第二个项目路径是 前面是 alias 且 路径后面最好加个 /
        //2. try_files 是防止刷新报错。最后一个地址是/admin/index.html
        //3. 项目的路径一定要匹配正确!