nginx配置多个服务(vue2, vue3)

// .env.development 文件 下

# 开发环境
VUE_APP_BASE_API = '/prod-api'
# 路由别名
VUE_APP_BASE_ROUTER = '/'

// .env.production  文件 下

# 生产环境
VUE_APP_BASE_API = '/prod-api'
# 路由别名
VUE_APP_BASE_ROUTER = '/prod/'

export default new Router({
    mode: 'history', // 去掉url中的#
    base: process.env.VUE_APP_BASE_ROUTER,  // 环境变量路由别名
    routes: constantRoutes
})

// vue.config.js 配置
module.exports = {
    // 域名根路径
    publicPath: process.env.VUE_APP_BASE_ROUTER,
    // 打包时生成文件的目录名称（根据要求进行修改默认dist目录）
    outputDir: 'prod'
}

// .env.development 文件 下

# 开发环境
VITE_APP_HOST = ''
# 路由别名
VITE_APP_ROUTE = ''

// .env.production  文件 下

# 生产环境
VITE_APP_HOST = '/prod-api'
# 路由别名
VITE_APP_ROUTE = '/prod/'

const router = createRouter({
  history: createWebHashHistory(),
  base: import.meta.env.VITE_APP_ROUTE,  // vue3 环境变量引入方式
  routes: modules
})

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd(), '')
    return {
        plugins: [vue()],
        base: env.VITE_APP_ROUTE,    
        build: {
          // 打包路径
          outDir: "prod",
          rollupOptions: {
            input: {
              // 入口文件
              main: resolve(__dirname, "index.html")
            },
          }
        }
    }
}

server {
    listen  80;
    server_name  localhost;
    # 项目一的配置
    location / {
        alias /opt/project1/view/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    location /prod-api/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8001/;
    }
    # 项目二的配置
    location /project2 {
        alias /opt/project2/view/dist;    // 注意要用  `alias` 
        index  index.html index.htm;
        try_files $uri $uri/ /project2/index.html; // 注意别名
    }
    location /project2-api/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8002/;
    }
}