|
|
# OA模块资源加载404错误诊断和解决方案
|
|
|
|
|
|
## 错误现象
|
|
|
|
|
|
```
|
|
|
GET http://192.167.20.118:8080/oa/static/css/chunk-libs.19fab405.css net::ERR_ABORTED 404 (Not Found)
|
|
|
GET http://192.167.20.118:8080/oa/static/js/chunk-libs.62099ae1.js net::ERR_ABORTED 404 (Not Found)
|
|
|
app.173e33f7.js:1 Uncaught SyntaxError: Unexpected token '<<' (at app.173e33f7.js:1:1)
|
|
|
```
|
|
|
|
|
|
## 问题分析
|
|
|
|
|
|
### 1. 资源文件不匹配
|
|
|
- **浏览器请求的文件**（旧版本）：
|
|
|
- `chunk-libs.19fab405.css`
|
|
|
- `chunk-libs.62099ae1.js`
|
|
|
- `app.173e33f7.js`
|
|
|
|
|
|
- **实际构建后的文件**（新版本）：
|
|
|
- `chunk-libs.6087fcbe.css`
|
|
|
- `chunk-libs.0f03f944.js`
|
|
|
- `app.edef6360.js`
|
|
|
|
|
|
### 2. 根本原因
|
|
|
浏览器加载的HTML文件是**缓存的旧版本**，其中引用的资源文件名与当前构建后的文件名不匹配。
|
|
|
|
|
|
## 解决方案
|
|
|
|
|
|
### 方案1：清除浏览器缓存（快速解决）
|
|
|
|
|
|
1. **Chrome/Edge浏览器**：
|
|
|
- 按 `Ctrl+Shift+Delete` (Windows) 或 `Cmd+Shift+Delete` (Mac)
|
|
|
- 选择"缓存的图片和文件"
|
|
|
- 时间范围选择"全部时间"
|
|
|
- 点击"清除数据"
|
|
|
|
|
|
2. **强制刷新**：
|
|
|
- Windows: `Ctrl+F5` 或 `Ctrl+Shift+R`
|
|
|
- Mac: `Cmd+Shift+R`
|
|
|
|
|
|
3. **开发者工具禁用缓存**：
|
|
|
- 打开开发者工具 (F12)
|
|
|
- 在Network标签页勾选"Disable cache"
|
|
|
- 刷新页面
|
|
|
|
|
|
### 方案2：重新构建并部署（推荐）
|
|
|
|
|
|
#### 步骤1：检查环境变量
|
|
|
确保构建时设置了正确的环境变量：
|
|
|
|
|
|
```bash
|
|
|
cd /Users/weizongsong/www/cz_hjjc/cz-hjjc-oa
|
|
|
|
|
|
# 检查是否有 .env 文件
|
|
|
ls -la .env*
|
|
|
|
|
|
# 如果没有，创建 .env.production 文件
|
|
|
cat > .env.production << EOF
|
|
|
VUE_APP_MODULE_NAME=oa
|
|
|
VUE_APP_BASE_API=/api
|
|
|
EOF
|
|
|
```
|
|
|
|
|
|
#### 步骤2：重新构建
|
|
|
```bash
|
|
|
# 清理旧的构建文件
|
|
|
rm -rf dist
|
|
|
|
|
|
# 使用正确的环境变量构建
|
|
|
VUE_APP_MODULE_NAME=oa npm run build:prod
|
|
|
|
|
|
# 或者如果已有 .env.production 文件
|
|
|
npm run build:prod
|
|
|
```
|
|
|
|
|
|
#### 步骤3：检查构建输出
|
|
|
```bash
|
|
|
# 检查构建后的文件
|
|
|
ls -la dist/static/css/chunk-libs.*
|
|
|
ls -la dist/static/js/chunk-libs.*
|
|
|
ls -la dist/static/js/app.*
|
|
|
|
|
|
# 检查 index.html 中的引用
|
|
|
grep -o 'chunk-libs\.[^"]*' dist/index.html
|
|
|
```
|
|
|
|
|
|
#### 步骤4：部署到服务器
|
|
|
```bash
|
|
|
# 将构建后的文件复制到后端public目录
|
|
|
cp -r dist/* /Users/weizongsong/www/cz_hjjc/backend/public/oa/
|
|
|
```
|
|
|
|
|
|
### 方案3：配置服务器缓存策略
|
|
|
|
|
|
如果使用Nginx，需要配置正确的缓存策略：
|
|
|
|
|
|
```nginx
|
|
|
# 对于HTML文件，禁用缓存或设置短缓存时间
|
|
|
location ~* \.html$ {
|
|
|
add_header Cache-Control "no-cache, no-store, must-revalidate";
|
|
|
add_header Pragma "no-cache";
|
|
|
add_header Expires "0";
|
|
|
}
|
|
|
|
|
|
# 对于静态资源（CSS/JS），可以设置长期缓存
|
|
|
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
|
|
expires 1y;
|
|
|
add_header Cache-Control "public, immutable";
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### 方案4：在HTML中添加版本号（长期方案）
|
|
|
|
|
|
修改 `vue.config.js`，在HTML中添加版本号参数：
|
|
|
|
|
|
```javascript
|
|
|
// vue.config.js
|
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|
|
|
|
|
module.exports = {
|
|
|
// ... 其他配置
|
|
|
chainWebpack(config) {
|
|
|
// ... 现有配置
|
|
|
|
|
|
// 在HTML中添加版本号，防止缓存
|
|
|
config.plugin('html').tap(args => {
|
|
|
args[0].templateParameters = {
|
|
|
...args[0].templateParameters,
|
|
|
version: Date.now() // 或使用 package.json 中的版本号
|
|
|
}
|
|
|
return args
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
然后在 `public/index.html` 中引用资源时添加版本号：
|
|
|
```html
|
|
|
<link rel="stylesheet" href="<%= BASE_URL %>static/css/app.css?v=<%= version %>">
|
|
|
```
|
|
|
|
|
|
## 验证步骤
|
|
|
|
|
|
1. **清除浏览器缓存后访问**：
|
|
|
```
|
|
|
http://192.167.20.118:8080/oa/
|
|
|
```
|
|
|
|
|
|
2. **检查网络请求**：
|
|
|
- 打开开发者工具 (F12)
|
|
|
- 查看Network标签页
|
|
|
- 确认请求的文件名与构建后的文件名一致
|
|
|
|
|
|
3. **检查控制台错误**：
|
|
|
- 应该不再有404错误
|
|
|
- 应该不再有语法错误
|
|
|
|
|
|
## 预防措施
|
|
|
|
|
|
1. **构建脚本**：在构建脚本中自动清理旧文件
|
|
|
2. **部署脚本**：使用部署脚本确保文件正确同步
|
|
|
3. **版本控制**：在HTML中添加构建版本号或时间戳
|
|
|
4. **服务器配置**：正确配置Web服务器的缓存策略
|
|
|
|
|
|
## 常见问题
|
|
|
|
|
|
### Q: 为什么会出现 `Uncaught SyntaxError: Unexpected token '<<'` 错误？
|
|
|
A: 这通常表示浏览器请求的JS文件实际上返回的是HTML错误页面（如404页面），而不是真正的JS文件。HTML内容以 `<!DOCTYPE` 或 `<html>` 开头，导致JS解析失败。
|
|
|
|
|
|
### Q: 如何确认服务器上的文件是否正确？
|
|
|
A: 直接访问资源URL：
|
|
|
```
|
|
|
http://192.167.20.118:8080/oa/static/css/chunk-libs.6087fcbe.css
|
|
|
http://192.167.20.118:8080/oa/static/js/chunk-libs.0f03f944.js
|
|
|
```
|
|
|
如果能正常访问，说明文件存在；如果404，说明文件不存在或路径不正确。
|
|
|
|
|
|
### Q: 构建后文件名每次都不同怎么办？
|
|
|
A: 这是正常的，Vue CLI使用内容哈希来生成文件名。只要HTML文件中的引用与构建后的文件名匹配即可。问题在于HTML文件被缓存了。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
