Vue2旧项目出现Uncaught SyntaxError: Unexpected Token '<'错误求助

这个错误本质是浏览器请求脚本文件时，拿到的不是预期的JS代码而是index.html内容，解析HTML的<符号时触发语法错误。结合你本地构建、Docker运行都正常的情况，重点排查线上环境的差异问题：

• 线上部署路径与publicPath不匹配
  如果你线上是部署在域名的子路径下（比如https://your-domain.com/app/），仅设置publicPath: '/'会导致脚本请求路径指向根资源，而实际资源在子路径里，服务器找不到资源就返回index.html。这种情况要把publicPath改成对应子路径（比如'/app/'），同时检查服务器配置（如Nginx的location）是否指向正确的dist目录。

• 服务器缓存/CDN缓存残留
  浏览器或CDN可能缓存了旧的资源路径，导致新部署的资源没被加载。试试强制刷新浏览器（Ctrl+Shift+R），或者清理CDN缓存。另外检查打包配置里的filenameHashing是否开启，开启后打包的静态资源会带哈希值，能避免缓存冲突。

• 服务器MIME类型配置缺失
  部分线上服务器可能未正确配置静态资源的MIME类型，比如把JS文件识别成文本/html，导致浏览器解析JS时读到HTML的<符号报错。以Nginx为例，要确保配置文件里包含：

  types {
      text/javascript js;
      text/css css;
      # 其他必要的资源类型配置
  }
  

• 线上资源上传不完整或权限问题
  对比本地dist目录和服务器上的文件，检查JS、CSS等文件是否完整上传，文件大小是否一致。另外确认服务器上的静态资源文件权限是否正确（比如Nginx需要读取权限，权限设为644通常没问题），权限不足会导致服务器返回404并 fallback 到index.html。

• 路由模式的服务器配置遗漏
  如果项目用的是history路由模式，线上服务器未配置fallback规则的话，刷新子路由或直接访问子路由时，服务器会返回index.html，但如果静态资源路径处理不当也会导致脚本请求错误。确保服务器配置了对应规则，比如Nginx里添加：

  location / {
      try_files $uri $uri/ /index.html;
  }
  

  注意如果是子路径部署，这里的规则要对应调整。

内容的提问来源于stack exchange，提问作者user5083862