Vite React生产构建部署后报Invalid or unexpected token错误求助

核心原因 #

1.toString()本身是JavaScript非法语法（.会被解析为小数点），正确写法应为(1).toString()或1..toString()。生产环境出现该代码，大概率是Vite打包时的压缩/混淆逻辑，或是第三方依赖转译异常导致。

分步排查与解决 #

• 调整Terser压缩配置
  Vite默认用Terser做生产压缩，部分压缩规则可能把合法代码转成非法格式。在vite.config.js里显式配置Terser，先禁用可能触发问题的选项：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    build: {
      minify: 'terser',
      terserOptions: {
        compress: {
          reduce_vars: false,
          sequences: false
        },
        mangle: false // 先关闭混淆验证问题来源
      }
    }
  });
  

  重新打包部署，若问题消失，再逐步开启选项定位具体触发项。

• 排查第三方依赖转译
  Vite对依赖的转译策略和CRA不同，部分未做ES兼容的依赖可能被错误转译。通过浏览器报错栈定位到涉事依赖后，在配置里强制Vite转译它：

  export default defineConfig({
    optimizeDeps: {
      include: ['涉事依赖包名']
    },
    build: {
      commonjsOptions: {
        include: [/涉事依赖包名/, /node_modules/]
      }
    }
  });
  

• 核对环境变量差异
  生产环境的import.meta.env变量（如NODE_ENV）可能触发特定代码分支，导致生成非法代码。确认生产环境变量和预发布环境一致，排除逻辑分支差异。

• 格式化打包产物检查
  把生产打包后的代码用Prettier格式化，仔细搜索是否存在1.toString()或压缩后的变体——有时候压缩后的代码合并成一行，肉眼难以直接识别。

临时应急方案 #

若需快速修复，可临时关闭Vite的代码压缩：

export default defineConfig({
  build: {
    minify: false
  }
});

注意这只是临时方案，长期仍需定位根源解决。

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