Vue3+Vite部署Ubuntu Nginx二级路由刷新空白页问题求助

核心原因 #

直接访问/刷新二级路由时，浏览器会尝试从当前路由路径（如/app/）加载静态资源（如/app/index.c7b47a24.js），但这些资源实际存放在服务器根目录的dist文件夹下。原Nginx配置会将所有找不到的请求重定向到index.html，导致JS资源请求返回的是HTML文件，触发MIME类型校验错误。

解决步骤 #

1. 确认Vite构建配置

确保vite.config.js中设置了绝对路径的base，保证静态资源从根目录加载：

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

export default defineConfig({
  plugins: [vue()],
  base: '/' // 必须设置为绝对路径，避免路由层级影响资源加载
})

修改后重新构建应用，将新的dist目录部署到/var/www/dist。

2. 修改Nginx配置

优先处理静态资源请求，避免静态资源被错误重定向到index.html：

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/dist;
    index index.html;

    server_name _;

    # 匹配所有静态资源后缀，直接返回对应文件，不存在则返回404
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        try_files $uri =404;
        # 可选：添加缓存头优化性能
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }

    # SPA路由 fallback：所有非静态资源请求返回index.html，交由Vue Router处理
    location / {
        try_files $uri $uri/ /index.html;
    }
}

3. 重启Nginx服务

sudo systemctl restart nginx

验证 #

完成上述操作后，直接访问/app/create或刷新该页面，静态资源会从根目录正确加载，页面正常渲染，控制台不再出现MIME类型错误。

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