Vue部署到子域名出现Uncaught SyntaxError: Unexpected token '<'如何解决

你遇到的Uncaught SyntaxError: Unexpected token '<'报错，本质是服务器对JS资源的请求返回了HTML格式的页面（HTML以<开头），浏览器无法解析为JS导致，按照以下步骤逐一排查即可解决：

1. 确认Vue项目打包配置 #

• 根域名部署时默认的publicPath（vue-cli）/base（vite）配置为'/'可正常运行，但子域名部署需要确认配置适配：如果子域名直接指向子应用dist目录作为根路径，保持该配置为'/'即可；如果配置过相对路径'./'或者写死了根域名路径，会直接导致资源请求地址错误。
• 修改配置后重新打包，将新的dist文件上传到服务器对应目录。

2. 排查Apache虚拟主机配置 #

两个应用分属不同子域名，必须配置独立的虚拟主机规则：

• 确认子域名对应的虚拟主机DocumentRoot参数，已正确指向第二个Vue应用的dist目录，而非根应用的目录
• 确认Apache运行用户拥有子应用dist目录的读取权限
• 确认子应用dist目录下的.htaccess配置为正确的history模式适配规则，参考示例：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

不要直接复用根应用的.htaccess文件，确保重写规则指向当前子应用的index.html，没有硬编码根域名相关路径。

3. 验证资源请求路径 #

打开浏览器控制台网络面板，刷新页面查看报错的app.js请求信息：

• 如果请求地址为https://example.com/js/app.js而非https://second.example.com/js/app.js，说明打包配置错误，或代码内硬编码了根域名的资源路径
• 如果请求地址为正确的子域名路径，但返回状态码为404，要么是静态资源未上传到对应目录，要么是重写规则遗漏了静态文件判断，检查.htaccess中是否存在RewriteCond %{REQUEST_FILENAME} !-f配置，该行作用是保证真实存在的静态文件不会被重写为HTML页面。

4. 额外踩坑点排查 #

• 执行sudo a2enmod rewrite确认Apache的rewrite模块已开启，执行后重启Apache：sudo systemctl restart apache2
• 确认子域名DNS解析已正确指向当前服务器IP，没有被CDN或反向代理缓存旧资源
• 用浏览器隐私模式访问测试，避免本地缓存干扰排查结果

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