Node 16下Nuxt 2模板与代码可选链失效问题求助

问题根源 #

升级Node到16.x后，旧版vue-template-babel-compiler与Nuxt2的服务端编译流程兼容性不足，导致模板编译生成的可选链语法未被正确转译；仅配置Babel插件只能处理JS代码，无法覆盖模板编译后的产物。

分步解决 #

1. 升级依赖版本

   • 卸载旧版vue-template-babel-compiler并安装最新兼容版：

     npm uninstall vue-template-babel-compiler
     npm install vue-template-babel-compiler@latest --save-dev
     

   • 升级Nuxt2到最新稳定版（修复Node16兼容性问题）：

     npm install nuxt@^2.17.0 --save
     

   • 安装必要的Babel插件：

     npm install @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator --save-dev
     

2. 修改Nuxt配置文件
   更新nuxt.config.js中的build配置，确保Babel同时处理客户端和服务端代码，且模板编译产物被正确转译：

   build: {
     loaders: {
       vue: {
         compiler: require('vue-template-babel-compiler')
       }
     },
     babel: {
       plugins: [
         '@babel/plugin-proposal-optional-chaining',
         '@babel/plugin-proposal-nullish-coalescing-operator'
       ],
       presets({ isServer }) {
         return [
           [
             '@nuxt/babel-preset-app',
             {
               targets: isServer ? { node: '16' } : { browsers: ['last 2 versions'] },
               corejs: 3
             }
           ]
         ]
       }
     },
     vendor: ['axios'],
     extend(config, ctx) {
       // 服务端额外处理.vue文件，确保模板编译产物被Babel转译
       if (ctx.isServer) {
         config.module.rules.push({
           test: /\.vue$/,
           use: [
             {
               loader: 'babel-loader',
               options: {
                 plugins: ['@babel/plugin-proposal-optional-chaining']
               }
             }
           ]
         })
       }
     }
   }
   

3. 清理缓存并重新构建

   rm -rf node_modules package-lock.json
   npm install
   npm run build
   

验证 #

执行npm run build或npm run dev，若不再出现Unexpected token错误，说明可选链语法在模板和JS代码中均已正常编译。

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