TypeScript 路径别名 - 如何修复导入错误

Question

我使用 Vue CLI 3 生成了 Vue.js 项目，并使用 @ 别名编写了导入语句。当我执行 npm run build 时，出现导入错误。为什么？

错误信息

$ npm run build

> vuejs-exercises@0.1.0 build /Users/???/Desktop/example
> vue-cli-service build


⠙  Building for production...Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
⠼  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                 21:07:57

This dependency was not found:

* @/models/Member in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/
babel-loader/lib!./node_modules/ts-loader??ref--13-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader
/lib??vue-loader-options!./src/main/javascript/components/Vote.vue?vue&type=script&lang=ts&

To install it, you can run: npm install --save @/models/Member
 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vuejs-exercises@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the vuejs-exercises@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/???/.npm/_logs/2019-04-30T12_07_57_611Z-debug.log

文件

tsconfig.json

    "paths": {
      "@/*": [
        "src/main/javascript/*",
        "src/test/javascript/*"
      ]
    },

src/main/javascript/models/Member.ts

export default class Member {
 ...
}

src/main/javascript/components/Vote.vue

import Member from '@/models/Member'; // import error

源代码：https://github.com/yoshikit1996/vuejs-exercise

语法高亮

我的 VSCode 可以检测到导入错误，但没有使用 @ 别名检测到它。

Answer 1

您可以在 vue.config.js 中使用 configureWebpack 或 chainWebpack 来设置自己的别名

vue.config.js

const path = require('path')
module.exports = {
  chainWebpack: config => {
        config.resolve.alias
        .set('@', path.resolve(__dirname, 'src/main/javascript'));
  }
}