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

一、修改路由index.js

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

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

vite nginx 实现同端口部署多个vue项目_第1张图片

二、修改vite.config.js

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

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

vite nginx 实现同端口部署多个vue项目_第2张图片

三、修改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. 项目的路径一定要匹配正确!

四、重启nginx即可~

vite nginx 实现同端口部署多个vue项目_第3张图片
vite nginx 实现同端口部署多个vue项目_第4张图片

你可能感兴趣的:(nginx,vue.js,运维)