Vite + Nginx 完整配置（三台服务器）

---

bootstrap（）初始化 mount(props) unmount()

分开打包，优先级：子应用-->主应用 子应用都打包部署后，再在主应用中注册子应用（main.ts）配置registerMicroApps；
注意：不管分服务器还是在同一服务器，路径配置entry，最好使用完整 IP 路径例：（entry: '//100.76.65.10:2019/datalink/'）

一、各应用 vite.config.ts 配置

1. 子应用1（120.79.89.249:2019）vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/datalink/',  // ⚠️ 路径要和 Nginx location 一致
  server: {
    port: 8888,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
  }
})

2. 子应用2（130.76.89.249:2019）vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/datax/',  // ⚠️ 路径要和 Nginx location 一致
  server: {
    port: 8889,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  },
  build: {
    outDir: 'dist',
  }
})

3. 主应用（100.76.65.10:2019）vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/',  // 主应用根路径
  server: {
    port: 8890,
    proxy: {
      '/datalink': {
        target: 'http://120.79.89.249:2019',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/datalink/, '/datalink')
      },
      '/datax': {
        target: 'http://130.76.89.249:2019',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/datax/, '/datax')
      }
    }
  },
  build: {
    outDir: 'dist',
  }
})

---

二、打包命令（各自服务器上执行）

# 子应用1服务器（120.79.89.249）
cd /home/project/datalink
npm run build
# 输出 → dist/

# 子应用2服务器（130.76.89.249）
cd /home/project/datax
npm run build
# 输出 → dist/

# 主应用服务器（100.76.65.10）
cd /home/project/main-app
npm run build
# 输出 → dist/

---

三、三台服务器 Nginx 配置（都加 CORS）

🔹 服务器1：120.79.89.249（子应用1）

/etc/nginx/conf.d/datalink.conf

server {
    listen 2019;
    server_name 120.79.89.249;

    # ✅ CORS 头 - 允许所有来源
    add_header Access-Control-Allow-Origin * always;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, PUT, DELETE' always;
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
    add_header Access-Control-Expose-Headers 'Content-Length,Content-Range' always;

    # 静态文件
    location /datalink/ {
        alias /home/project/datalink/dist/;
        index index.html;
        try_files $uri $uri/ /datalink/index.html;  # ⚠️ SPA 必加
    }

    # OPTIONS 预检请求直接返回 204
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

---

🔹 服务器2：130.76.89.249（子应用2）

/etc/nginx/conf.d/datax.conf

server {
    listen 2019;
    server_name 130.76.89.249;

    add_header Access-Control-Allow-Origin * always;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, PUT, DELETE' always;
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;

    location /datax/ {
        alias /home/project/datax/dist/;
        index index.html;
        try_files $uri $uri/ /datax/index.html;
    }

    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

---

🔹 服务器3：100.76.65.10（主应用）

/etc/nginx/conf.d/main-app.conf

server {
    listen 2019;
    server_name 100.76.65.10;

    add_header Access-Control-Allow-Origin * always;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, PUT, DELETE' always;
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;

    location / {
        alias /home/project/main-app/dist/;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

---

四、主应用中注册子应用（qiankun 示例）

// main-app src/main.ts
import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'datalink',
    entry: '//120.79.89.249:2019/datalink/',  // ✅ 用真实 IP
    container: '#subapp-container',
    activeRule: '/datalink',
  },
  {
    name: 'datax',
    entry: '//130.76.89.249:2019/datax/',     // ✅ 用真实 IP
    container: '#subapp-container',
    activeRule: '/datax',
  },
])

start()

---

五、一键重载 Nginx

每台服务器配置改完后执行：

nginx -t          # 先检查配置语法
nginx -s reload   # 重载，不中断服务

---

关键检查清单

检查项	位置	状态
base 路径和 Nginx location 一致	vite.config.ts + nginx	⚠️ 必须一致
CORS 三台服务器都加了 always	nginx conf	✅ 已加
try_files 回退到 index.html	nginx conf	✅ 已加（SPA 必需）
OPTIONS 请求返回 204	nginx conf	✅ 已加（避免预检失败）
主应用 entry 填的是真实 IP	qiankun 配置	✅ 已填

always 关键字不能省：没有 always 的话，Nginx 只在 200/204 响应时加 CORS 头，404/500 不会加，导致部分请求跨域失败。

同一台服务器的 Nginx 配置（简化版）

一、三台合一，一份配置搞定：

/etc/nginx/conf.d/micro-frontend.conf

server {
    listen 2019;
    server_name 100.76.65.10;

    # ✅ CORS
    add_header Access-Control-Allow-Origin * always;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, PUT, DELETE' always;
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;

    # 子应用1
    location /datalink/ {
        alias /home/project/datalink/dist/;
        index index.html;
        try_files $uri $uri/ /datalink/index.html;
    }

    # 子应用2
    location /datax/ {
        alias /home/project/datax/dist/;
        index index.html;
        try_files $uri $uri/ /datax/index.html;
    }

    # 主应用
    location / {
        alias /home/project/main-app/dist/; //部署文件的绝对路径
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # OPTIONS 预检
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}