Nginx反向代理Vite+Vue应用出现空白页或无响应问题排查

核心问题分析 #

从你的配置来看，几个关键错误导致了部署后页面空白：

1. Vite配置的端口参数错误 #

你的Vite配置中server.Port是大写格式，而Vite的标准配置项是小写的port，这会导致开发服务器未按预期在5173端口启动，Nginx代理到无服务的端口后返回空白页面。

2. Build配置的外部依赖未引入 #

你在rollupOptions.external中声明了vue、vue-router等依赖为外部资源，但index.html中没有添加这些依赖的CDN引入链接，打包后的代码无法找到全局变量，导致Vue应用无法初始化。

3. 错误在前端代码中使用Node.js的cors中间件 #

cors是Node.js后端专属的跨域中间件，前端Vue应用不需要也无法使用它，这部分代码会引发潜在的加载错误。

4. Nginx配置不符合生产部署逻辑 #

当前Nginx配置是代理到Vite开发服务器（5173），但生产环境应该直接托管Vite build生成的静态文件，开发服务器不适合用于生产场景。

分步修复方案 #

修复Vite配置文件 #

import { fileURLToPath, URL } from 'node:url'
import { defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import mkcert from 'vite-plugin-mkcert'

const env = process.env.NODE_ENV
console.log("Environment is : " + env)
const HOST = "http://backend:8081"

export default defineConfig({
  plugins: [
    vue(),
    mkcert()
  ],
  build: {
    target: 'esnext',
    // 移除external配置（除非你明确要通过CDN引入依赖，并在index.html中添加对应script标签）
    // rollupOptions: {
    //   external: ['vue', 'vue-router', "@auth0/auth0-spa-js"],
    //   output: {
    //     globals: {
    //       vue: 'Vue'
    //     }
    //   }
    // }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    https: true,
    port : 5173, // 改为小写的标准配置项
    host : "0.0.0.0",
    proxy: {
      "^/api/.": {
        target: HOST,
        secure: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      }
    },
  }
})

若需通过CDN引入外部依赖，需在index.html中添加对应链接，例如：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>

修复main.js代码 #

移除前端中错误使用的cors相关代码：

import { createApp } from 'vue'

import App from './App.vue'
import Login from './Login.vue'
import Home from './Home.vue'
import store from './store'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import PrimeVue from 'primevue/config';
import "primevue/resources/themes/lara-light-indigo/theme.css";     
import "primevue/resources/primevue.min.css";
import InputText from 'primevue/inputtext';
import Calendar from 'primevue/calendar';
import Dialog from 'primevue/dialog';
import Textarea from 'primevue/textarea';
import Dropdown from 'primevue/dropdown';
import Checkbox from 'primevue/checkbox';
import Notifications from '@kyvg/vue3-notification'
import * as VueRouter from "vue-router";

// 移除cors相关引入与配置
// import cors from 'cors'
// const corsConfig = { credentials:true, origin:"*", }

const routes = [
    { path: '/', component: Home, meta : { requiredAuth : true, }},
    { path: '/login', component: Login },
  ]
const router = VueRouter.createRouter({
    history: VueRouter.createWebHistory(),
    routes,
})

router.beforeEach(async (to, from, next) => {   
    let isAuthenticated = store.state.auth.isAuthenticated;
    if(to.path !== '/login' && to.meta.requiredAuth && !isAuthenticated){
        next('/login');
    } else if (from.path === '/login' && to.meta.requiredAuth && isAuthenticated){
        next();
    } else {
        next();
    }
})

const app = createApp(App);
app.use(router)

// 移除cors相关的use调用
app.use(PrimeVue)
    .use(store)
    .use(Notifications)
app.component('IssuesDialog', IssuesDialog)
    .component('AccessDWC', AccessDWC)
    .component('Dialog', Dialog)
    .component('Textarea', Textarea)
    .component('Calendar', Calendar)
    .component('InputText', InputText)
    .component('Dropdown', Dropdown)
    .component('Checkbox', Checkbox)
    .component('Login', Login)
app.mount('#app');

调整Nginx配置（生产部署静态文件） #

先执行npm run build生成dist目录，再修改Nginx配置托管静态文件：

server {
    listen       80;
    listen       443 ssl;

    server_name  servername.com;

    ssl_certificate      /etc/ssl/certificate.crt;
    ssl_certificate_key  /etc/ssl/private.key;

    # 指定dist目录路径
    root /path/to/your/project/dist;
    index index.html;

    location / {
        # 解决Vue路由history模式下刷新404的问题
        try_files $uri $uri/ /index.html;
    }

    # 代理API请求到后端服务
    location /api/ {
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_pass http://backend:8081/; # 末尾的/确保路径重写正确
    }
}

验证步骤 #

1. 执行npm run build确认dist目录生成正常
2. 重启Nginx并访问你的域名
3. 打开开发者工具Network面板，确认所有静态资源（js、css）均返回200状态
4. 查看Console面板是否有报错，针对性解决剩余问题

内容的提问来源于stack exchange，提问作者Le kartograf