# 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 ``` ## 验证步骤 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内容以 `` 开头，导致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文件被缓存了。