Vue.js 3 + TypeScript 自定义别名代码无错但运行报错求助

环境说明 #

• VS Code
• Vue.js 3
• Windows系统

问题现象 #

创建测试项目复现问题：在.vue组件中使用自定义别名@logic/xxx导入TypeScript文件时，VS Code无报错且能正确识别文件路径，但执行npm run serve时终端抛出错误：

Can't resolve '@logic/enemy-repository' in '~\enemytest\src\views'

多次重建项目调整配置，问题仍未解决。

补充信息 #

1. 报错的导入方式：import EnemyRepository from '@logic/enemy-repository'
2. 使用相对路径（如import EnemyRepository from '../logic/enemy-repository'）可正常运行
3. 使用Vue CLI默认根路径别名@/（如import EnemyRepository from '@/logic/enemy-repository'）也正常
4. 推测问题出在tsconfig.json配置，当前相关配置片段如下：

"baseUrl": ".",
"paths": {
   "@/*": [
      "src/*"
   ],
   "@logic/*": ["src/logic/*"],
},

复现步骤 #

1. 执行vue create enemytest初始化项目
2. 手动选择功能：Babel、Typescript、Router、vuex、linter/formatter
3. 选择Vue 3.x版本
4. 启用类式组件语法
5. 同时使用Babel和TypeScript
6. 开启Router的history模式
7. 选择仅包含错误预防的ESLint规则
8. 设置保存时自动lint
9. 选择配置文件单独存放
10. 在VS Code中打开项目
11. 在/src/logic目录下创建enemy-repository.ts文件并导出方法
12. 在HomeView.vue中使用@logic/enemy-repository导入该文件
13. 在tsconfig.json的paths字段中添加"@logic/*": ["src/logic/*"]配置
14. 执行npm run serve启动项目
15. 终端出现上述模块找不到的错误

解决思路 #

问题本质 #

tsconfig.json中的paths仅为TypeScript编译器提供路径解析规则，但Vue3项目的打包工具（webpack）并不识别这些自定义别名。默认的@/*能正常工作，是因为Vue CLI已经在webpack配置中自动映射了该别名。

具体解决方法 #

方法一：手动配置webpack别名

在项目根目录创建或修改vue.config.js，添加webpack的别名映射：

const { defineConfig } = require('@vue/cli-service')
const path = require('path')

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

方法二：自动同步tsconfig路径配置

安装tsconfig-paths-webpack-plugin插件，让webpack自动读取tsconfig.json的paths配置：

1. 安装依赖：

npm install tsconfig-paths-webpack-plugin --save-dev

2. 修改vue.config.js：

const { defineConfig } = require('@vue/cli-service')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = defineConfig({
  configureWebpack: {
    resolve: {
      plugins: [new TsconfigPathsPlugin()]
    }
  }
})

验证 #

修改配置后，重启npm run serve，即可正常解析@logic/*别名。

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