NGINX部署Vue3 Vite SPA显示空白页问题求助

一、修正Nginx配置冲突 #

当前Nginx配置存在几个关键问题，是导致页面异常的核心原因：

• 全局/assets/路径冲突：现有配置会把所有/assets/请求指向Vue应用的assets目录，既干扰根路径静态页面的资源加载，也不符合子路径SPA的资源路由逻辑。
• alias与try_files配合错误：使用alias时，回退路径需严格匹配子路径结构，避免和根路由的规则冲突。
• MIME类型配置不全：手动指定的types缺失大量必要类型，可能导致部分资源无法被浏览器正确解析。

修正后的Nginx配置：

events {
    worker_connections  1024;
}

http {
    # 引入默认MIME类型（若Nginx安装目录下有mime.types，取消下方注释）
    # include mime.types;
    default_type application/octet-stream;

    server {
        listen 80;
        server_name localhost;

        # 根路径静态页面配置
        location / {
            root C:/test;
            index index.html;
            try_files $uri $uri/ /index.html;
        }

        # Vue SPA子路径核心配置
        location /display/outbound/ {
            alias C:/test/display/outbound/;
            index index.html;
            try_files $uri $uri/ /display/outbound/index.html;
        }

        # API反向代理
        location /display/outbound/api/ {
            proxy_pass http://localhost:52000/api/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        # Vue应用专属assets路由，避免全局冲突
        location /display/outbound/assets/ {
            alias C:/test/display/outbound/assets/;
            # 静态资源缓存优化（可选）
            expires 30d;
            add_header Cache-Control "public, immutable";
        }

        # Vue应用favicon路由
        location /display/outbound/favicon.ico {
            alias C:/test/display/outbound/favicon.ico;
        }
    }
}

二、确认Vue Vite配置有效性 #

1. base参数必须准确：在vite.config.js中确保base设置为子路径（注意末尾斜杠）：

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

export default defineConfig({
  plugins: [vue()],
  base: '/display/outbound/'
})

2. 重新打包并部署：修改base后必须执行npm run build，将打包产物覆盖到C:/test/display/outbound/目录，确保所有资源引用路径基于子路径。

三、排查“Filter is not a function”错误 #

该错误大概率是全局变量Filter被意外覆盖导致，可从以下方向排查：

• 检查Nginx是否有额外的add_header或脚本注入配置，污染了全局作用域。
• 排查Vue代码中是否自定义了大写的Filter变量，覆盖了原生构造函数（注意原生数组方法是小写filter）。
• 临时移除第三方依赖，验证是否是某个依赖包导致的全局变量污染。
• 查看浏览器控制台报错的具体JS文件和行号，定位Filter变量的定义来源。

四、验证步骤 #

1. 重启Nginx加载新配置。
2. 用无痕模式访问http://localhost/display/outbound，避免缓存干扰。
3. 检查网络标签，确认所有JS/CSS资源的请求路径为/display/outbound/assets/xxx且返回200状态码。
4. 根据控制台报错定位Filter变量的异常来源。

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