Vue CLI-Karma单元测试无法解析导入别名问题求助

你的问题核心在于：jsconfig.json中的路径别名仅用于IDE代码提示，实际模块解析依赖webpack的配置。你引入的Vue CLI默认webpack配置只包含@指向src的映射，并没有@unit的相关配置，因此Karma通过webpack打包测试代码时无法解析该别名。

修复方案 #

在karma.conf.js的webpack配置段中，手动补充resolve.alias，添加@unit的路径映射：

const webpackConfig = require('@vue/cli-service/webpack.config.js')
const path = require('path')

// 计算test/unit目录的绝对路径
const unitDirPath = path.resolve(__dirname, './')

module.exports = (config) => {
  config.set({
    // ... 保留原有其他配置
    webpack: {
      ...webpackConfig,
      devtool: 'inline-source-map',
      resolve: {
        ...webpackConfig.resolve,
        alias: {
          ...webpackConfig.resolve.alias,
          // 新增@unit的别名映射
          '@unit': unitDirPath
        }
      }
    },
    // ... 保留原有其他配置
  })
}

可选优化（统一别名配置） #

如果想让开发环境和测试环境共用别名，避免重复配置，可以在项目根目录的vue.config.js中统一配置webpack别名：

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '@unit': path.resolve(__dirname, 'test/unit')
      }
    }
  }
}

配置完成后，Vue CLI生成的webpackConfig会自动包含这两个别名，Karma中直接复用webpackConfig即可，无需再单独添加。

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