Nuxt2 CSR项目生产部署报Unexpected token '<'语法错误如何解决

错误根因 #

该报错本质是浏览器请求JS/CSS静态资源时，服务器未找到对应文件，触发了SPA路由 fallback 规则返回了index.html的HTML内容，浏览器尝试将HTML内容作为JS解析，就会抛出指向<字符的语法错误。

核心问题定位 #

你混淆了Nuxt2不同部署模式的构建命令：

• yarn run build 生成的是Node服务运行所需的.nuxt目录产物，需要配合yarn run start启动Node服务使用，不会生成可直接静态部署的完整dist目录
• 要生成纯静态部署产物，需要执行yarn run generate命令

解决方案 #

根据你的部署需求选对应方案即可：

方案1：纯静态部署（用Apache直接托管静态文件，无需Node服务）

1. 替换构建命令
   执行yarn run generate，命令执行完成后会生成包含所有静态资源的完整dist目录
2. 修正Apache配置（可选优化，兼容不同版本Apache）

DocumentRoot /var/www/secret/dist

<Directory /var/www/secret/dist>
    Options -Indexes
    AllowOverride all
    # Apache 2.4+ 权限配置，兼容老版本可以保留原有allow规则
    Require all granted
    Order allow,deny
    allow from all
</Directory>

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

3. 重启Apache后清浏览器缓存访问即可。如果站点部署在子路径而非域名根目录，需要在nuxt.config.js的build节点添加配置：

build: {
  // 示例部署在/subpath/子路径，替换为你实际的子路径即可
  publicPath: '/subpath/_nuxt/',
  // 原有extend配置保留
  extend(config, ctx) {
    if (ctx.isDev) {
      config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
    }
  }
}

方案2：Node服务部署（用Apache反向代理Nuxt服务）

如果需要保留Node服务的能力，按以下步骤操作：

1. 执行yarn run build生成.nuxt运行时产物
2. 安装pm2做进程守护，在项目根目录执行pm2 start yarn --name "nuxt-app" -- start，Nuxt服务默认会监听本地127.0.0.1:3000端口
3. 开启Apache代理模块：a2enmod proxy proxy_http && systemctl restart apache2
4. 替换虚拟主机配置为反向代理规则：

<VirtualHost *:80>
    ServerName 你的实际域名
    ProxyPass / http://127.0.0.1:3000/
    ProxyPassReverse / http://127.0.0.1:3000/
</VirtualHost>

5. 重启Apache后访问即可。

验证检查项 #

• 执行对应构建命令后，检查产物目录是否完整：静态部署检查dist/_nuxt目录下是否存在JS/CSS文件，Node部署检查.nuxt目录是否正常生成
• 访问时开浏览器开发者工具的网络面板，确认静态资源的请求路径是否和实际部署路径一致，没有404错误

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