2025-08-11 11:50:42 +08:00

4.3 KiB

Raw Permalink Blame History

JS文件路径问题修复说明

🚨 问题描述

在部署到开发服务器 dev-casedata.igandan.com 时，JS文件路径不正确，导致404错误：

/admin/js/vue-types-DoCPvpw_.js HTTP/1.1" 405 552

目标路径: /admin/web/assets/js/[filename]-[hash].js

🔍 问题分析

1. 路径配置不一致

vite.config.js: base: '/' (开发环境)
package.json构建命令: --base=/admin/web/ (生产环境)
实际部署路径: /admin/web/

2. 构建输出路径问题

JS文件被放在 js/ 目录下
但base路径配置为 /admin/
导致最终路径变成 /admin/js/ 而不是 /admin/assets/js/

✅ 解决方案

1. 统一base路径配置

修改 `vite.config.js`

export default {
  base: process.env.NODE_ENV === 'production' ? '/admin/web/' : '/',
  // ... 其他配置
}

修改 `package.json` 构建命令

{
  "scripts": {
    "build:dev-server": "vite build --config vite.config.dev-server.js --mode dev-server",
    "build:test": "vite build --base=/admin/ --mode test",
    "build:pre": "vite build --base=/admin/ --mode pre",
    "build:prod": "vite build --base=/admin/ --mode production"
  }
}

2. 创建专门的开发服务器配置

新增 `vite.config.dev-server.js`

export default {
  base: '/admin/web/',
  // ... 其他配置
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
      }
    }
  }
}

3. 修复构建输出路径

修改 `vite.config.js` 中的构建配置

build: {
  rollupOptions: {
    output: {
      chunkFileNames: 'assets/js/[name]-[hash].js',
      entryFileNames: 'assets/js/[name]-[hash].js',
      assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
    }
  }
}

🚀 使用方法

1. 构建开发服务器版本

# 使用专门的配置文件构建
npm run build:dev-server

# 或者使用构建脚本
./build-dev-server.sh

2. 验证构建结果

构建完成后，检查以下文件路径是否正确：

dist/
├── index.html
├── assets/
│   ├── js/
│   │   ├── index-[hash].js
│   │   └── vendor-[hash].js
│   ├── css/
│   │   └── index-[hash].css
│   └── [其他资源文件]

3. 检查index.html中的路径

确保 dist/index.html 中的资源路径以 /admin/web/assets/ 开头：

<script type="module" crossorigin src="/admin/web/assets/js/index-[hash].js"></script>
<link rel="stylesheet" crossorigin href="/admin/web/assets/css/index-[hash].css">

🔧 部署配置

Nginx配置示例

server {
    listen 80;
    server_name dev-casedata.igandan.com;
    
    location /admin/web/ {
        alias /path/to/your/dist/;
        try_files $uri $uri/ /admin/web/index.html;
        
        # 处理静态资源
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
}

Docker部署

确保构建后的文件正确复制到容器中：

# 复制构建后的前端资源
COPY dist/ /usr/share/nginx/html/

📋 检查清单

修改 vite.config.js 中的base路径
创建 vite.config.dev-server.js 专用配置
更新 package.json 中的构建命令
修复构建输出路径配置
测试构建结果
验证部署后的资源访问

🎯 预期结果

修复后，JS文件应该能够正确访问：

✅ 正确路径: /admin/web/assets/js/[filename]-[hash].js
❌ 错误路径: /admin/js/[filename]-[hash].js

🆘 故障排除

如果问题仍然存在：

清理构建缓存

rm -rf dist node_modules/.vite
npm run build:dev-server

检查环境变量
```
cat .env.dev-server
```
验证构建配置
```
npm run build:dev-server -- --debug
```
检查网络请求 使用浏览器开发者工具查看Network标签页中的资源请求路径

📞 技术支持

如果按照以上步骤仍然无法解决问题，请检查：

构建日志输出
浏览器控制台错误信息
服务器访问日志
网络请求状态码

4.3 KiB Raw Permalink Blame History Unescape Escape