5.0 KiB

Raw Blame History Unescape Escape

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：清除浏览器缓存（快速解决）

Chrome/Edge浏览器：
- 按 Ctrl+Shift+Delete (Windows) 或 Cmd+Shift+Delete (Mac)
- 选择"缓存的图片和文件"
- 时间范围选择"全部时间"
- 点击"清除数据"
强制刷新：
- Windows: Ctrl+F5 或 Ctrl+Shift+R
- Mac: Cmd+Shift+R
开发者工具禁用缓存：
- 打开开发者工具 (F12)
- 在Network标签页勾选"Disable cache"
- 刷新页面

方案2：重新构建并部署（推荐）

步骤1：检查环境变量

确保构建时设置了正确的环境变量：

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：重新构建

# 清理旧的构建文件
rm -rf dist

# 使用正确的环境变量构建
VUE_APP_MODULE_NAME=oa npm run build:prod

# 或者如果已有 .env.production 文件
npm run build:prod

步骤3：检查构建输出

# 检查构建后的文件
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：部署到服务器

# 将构建后的文件复制到后端public目录
cp -r dist/* /Users/weizongsong/www/cz_hjjc/backend/public/oa/

方案3：配置服务器缓存策略

如果使用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中添加版本号参数：

// 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 中引用资源时添加版本号：

<link rel="stylesheet" href="<%= BASE_URL %>static/css/app.css?v=<%= version %>">

验证步骤

清除浏览器缓存后访问：
```
http://192.167.20.118:8080/oa/
```
检查网络请求：
- 打开开发者工具 (F12)
- 查看Network标签页
- 确认请求的文件名与构建后的文件名一致
检查控制台错误：
- 应该不再有404错误
- 应该不再有语法错误

预防措施

构建脚本：在构建脚本中自动清理旧文件
部署脚本：使用部署脚本确保文件正确同步
版本控制：在HTML中添加构建版本号或时间戳
服务器配置：正确配置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文件被缓存了。

5.0 KiB Raw Blame History Unescape Escape