M1芯片MacOS环境下Nuxt.js项目编译报错：Module parse failed: Unexpected character '@'

问题分析 #

你碰到的Unexpected character '@'编译错误，核心原因是Webpack没能正确解析TypeScript里的装饰器语法（比如代码里的@Component）。虽然项目已经配置了@nuxt/typescript-build，但M1的ARM架构和传统Intel的x86架构在依赖编译、node_modules兼容性上存在差异，这是导致你和其他团队成员（Intel Mac）表现不一致的关键。

解决方案 #

1. 清理并适配M1架构重新安装依赖 #

M1 Mac安装部分依赖时可能默认拉取x86版本，引发编译异常，按以下步骤操作：

• 先删除现有依赖和锁文件：

  rm -rf node_modules package-lock.json yarn.lock
  

• 用Rosetta 2启动终端（右键终端→获取信息→勾选"使用Rosetta打开"），再重新安装依赖：

  npm install
  # 或用yarn
  yarn install
  

  这一步能让依赖以x86架构编译，解决大部分M1上的依赖兼容问题。

2. 确保TypeScript配置启用装饰器 #

检查项目根目录的tsconfig.json，如果没有则创建一个，确保开启装饰器相关配置：

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "node",
    "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "types": ["@nuxt/types", "@nuxtjs/axios", "@nuxtjs/auth", "vue-property-decorator"]
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

其中"experimentalDecorators": true是解析@Component这类装饰器的必要配置。

3. 修复Nuxt配置中的重复模块加载 #

你的nuxt.config.js里buildModules和modules都添加了@nuxt/typescript-build，重复加载会引发编译逻辑冲突，建议只保留在buildModules中：

buildModules: ['@nuxt/typescript-build'],
modules: [
  '@nuxtjs/axios',
  '@nuxtjs/auth',
  '@nuxtjs/toast',
  '@nuxtjs/style-resources',
  '@nuxtjs/sentry',
  '@nuxtjs/device',
],

4. 升级相关依赖版本 #

如果以上步骤无效，尝试升级Nuxt和TypeScript相关依赖到最新兼容版本：

npm update @nuxt/core @nuxt/typescript-build vue-property-decorator typescript

新版本依赖通常会修复M1架构下的兼容性问题。

验证解决 #

完成操作后重启开发服务：

npm run dev

如果编译成功，说明问题已解决；若仍有报错，可以检查是否存在其他未适配M1的依赖，或者尝试在nuxt.config.js的build.extend中手动补充TypeScript loader配置（不过@nuxt/typescript-build已封装这部分逻辑，一般无需额外配置）。

内容的提问来源于stack exchange，提问作者Sebastián Molinari