配置Nginx与Vite解决Vue Docker部署的资源路径异常问题

问题根源 #

1. Vite设置base: '/test/'后，打包生成的资源引用路径为/test/assets/xxx.js，但Nginx的location ~ ^/assets/(.*)$规则仅匹配/assets/开头的请求，完全无法命中实际的/test/assets/请求，导致所有静态资源请求被location /捕获，触发try_files返回index.html。
2. Nginx的root配置错误，错误拼接路径导致静态资源无法被正确定位。

修正方案 #

1. 确认Vite配置（无需修改，仅验证） #

确保vite.config.ts的base配置正确，打包后dist目录下的index.html中资源引用路径为/test/assets/xxx.js格式：

// vite.config.ts
export default defineConfig({
  base: '/test/',
  // 其他配置...
})

执行npm run build后，检查dist/index.html中的资源引用是否符合预期。

2. 修改Nginx配置（核心修正） #

删除无效的location ~ ^/assets/(.*)$规则，新增针对/test/路径的location配置，使用alias映射到Vite打包后的dist目录（假设你的dist文件存放在/home/vue_server/dist/）：

server {
    listen   8080 default_server;
    server_name  "";

    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log main;

    # 处理/test/路径下的所有请求，映射到dist目录
    location /test/ {
        alias /home/vue_server/dist/;
        try_files $uri $uri/ /test/index.html;
        
        # 可选：添加静态资源缓存头优化性能
        location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
            expires 30d;
            add_header Cache-Control "public, immutable";
        }
    }

    # 其他路径按需处理，示例返回404
    location / {
        return 404;
    }
}

配置说明 #

• alias /home/vue_server/dist/：将/test/开头的请求路径替换为/home/vue_server/dist/，例如/test/assets/app.js会被映射到/home/vue_server/dist/assets/app.js，正确匹配打包后的静态资源位置。
• try_files $uri $uri/ /test/index.html：优先尝试访问请求的文件/目录，若不存在则返回/test/index.html，支持Vue单页应用的路由跳转。
• 静态资源缓存规则：对js、css等静态资源设置缓存，减少重复请求（可选配置）。

验证步骤 #

1. 重新构建Vue项目：npm run build，确保dist目录正确生成。
2. 更新Docker中的Nginx配置，重启容器。
3. 访问http://localhost:808/test/index，检查页面是否正常加载；打开浏览器开发者工具的Network标签，确认/test/assets/下的js、css文件返回200状态而非HTML内容。

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