基于Vue CLI/TypeScript的Vue2项目无法构建及运行Mocha单元测试

架构老林

2026-10-14

问题解决方案

一、TypeScript可选链操作符`?.`报错解决

该报错是由于测试、生产环境下Babel未对可选链、空值合并运算符等新语法做转译导致，可按以下步骤修复：

安装对应Babel插件

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

配置babel.config.js（项目根目录无该文件则新建）

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator'
  ]
}

检查tsconfig.json配置：确保compilerOptions.target设置为ESNext或ES2020，将语法转译工作交给Babel处理即可。

二、Vuetify Sass导入报错解决

该报错是由于项目同时安装了node-sass与sass（dart-sass）产生冲突，且sass-loader未适配Vuetify的样式导入规则导致，修复步骤如下：

卸载冲突的node-sass依赖

npm uninstall node-sass

修改vue.config.js，新增样式相关配置

module.exports = {
  transpileDependencies: ['vuetify'],
  lintOnSave: true,
  configureWebpack: {
    devtool: 'source-map',
  },
  pluginOptions: {
    apollo: { lintGQL: true },
    vuetify: {
      loaderOptions: {
        sass: {
          // 若有自定义Vuetify变量文件，替换下方路径为你的变量文件路径
          additionalData: `@import "~vuetify/src/styles/styles.sass"`
        },
        scss: {
          additionalData: `@import "~vuetify/src/styles/styles.sass";`
        }
      }
    }
  },
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          indentedSyntax: true
        }
      }
    }
  }
};