# 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`
```javascript
export default {
  base: process.env.NODE_ENV === 'production' ? '/admin/web/' : '/',
  // ... 其他配置
}
```

#### 修改 `package.json` 构建命令
```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`
```javascript
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` 中的构建配置
```javascript
build: {
  rollupOptions: {
    output: {
      chunkFileNames: 'assets/js/[name]-[hash].js',
      entryFileNames: 'assets/js/[name]-[hash].js',
      assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
    }
  }
}
```

## 🚀 使用方法

### 1. 构建开发服务器版本
```bash
# 使用专门的配置文件构建
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/` 开头：

```html
<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配置示例
```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部署
确保构建后的文件正确复制到容器中：

```dockerfile
# 复制构建后的前端资源
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`

## 🆘 故障排除

### 如果问题仍然存在：

1. **清理构建缓存**
   ```bash
   rm -rf dist node_modules/.vite
   npm run build:dev-server
   ```

2. **检查环境变量**
   ```bash
   cat .env.dev-server
   ```

3. **验证构建配置**
   ```bash
   npm run build:dev-server -- --debug
   ```

4. **检查网络请求**
   使用浏览器开发者工具查看Network标签页中的资源请求路径

## 📞 技术支持

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

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