192 lines
4.3 KiB
Markdown
192 lines
4.3 KiB
Markdown
# 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. 网络请求状态码 |