问题描述

今天在使用 Nginx 部署前端程序时遇到了一个的问题。部署过程中出现了语法错误：

1
2
Uncaught SyntaxError: Unexpected token '<' (at chunk-elementUI.4b419166.js:1:1)
Uncaught SyntaxError: Unexpected token '<' (at chunk-libs.e9c68a76.js:1:1)

问题经过

初始操作

  1. 开始上传前端构建文件到服务器
  2. 文件还在传输过程中，我就急着访问了网站
  3. 浏览器显示上述 JavaScript 语法错误

错误判断

起初以为是文件传输不完整导致的，于是：

  1. 等待文件传输完成
  2. 再次访问网站
  3. 仍然出现相同的错误

这让我很困惑，明明文件已经传输完成了，为什么还是报错？

问题分析

错误现象分析

看到 Unexpected token '<' 这个错误，说明：

  • 浏览器期望得到 JavaScript 文件
  • 但实际接收到的是 HTML 内容（404 页面或者错误页面）
  • JavaScript 解析器遇到 HTML 的 < 标签就报语法错误

真正的原因

当我在文件传输未完成时访问网站，Nginx 返回了 404 或者错误页面。浏览器将这些 HTML 页面缓存了，即使后来文件传输完成，浏览器仍然使用缓存中的错误内容。

解决方案

方法一：强制刷新浏览器缓存

1
2
3
4
5
# Windows/Linux
Ctrl + F5

# macOS
Cmd + Shift + R

方法二：清除浏览器缓存

  1. 打开浏览器开发者工具（F12）
  2. 右键刷新按钮，选择”清空缓存并硬性重新加载”
  3. 或者在 Application/Storage 标签页手动清除缓存

方法三：使用无痕模式测试

1
2
3
# 打开无痕窗口验证问题是否解决
Ctrl + Shift + N  # Chrome
Ctrl + Shift + P  # Firefox