[英]TypeScript path alias - How to fix import error
I generated Vue.js project using Vue CLI 3 and wrote import statement using @
alias.When I execute npm run build
, an import error happen.Why?我产生Vue.js项目中使用Vue的CLI 3,写使用import语句@
alias.When我执行npm run build
,导入错误happen.Why?
$ 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 src/main/javascript/models/Member.ts
export default class Member {
...
}
src/main/javascript/components/Vote.vue src/main/javascript/components/Vote.vue
import Member from '@/models/Member'; // import error
Source Code: https://github.com/yoshikit1996/vuejs-exercise源代码: https : //github.com/yoshikit1996/vuejs-exercise
My VSCode can detect import error but didn't detect it with @
alias.我VSCode可以检测输入错误,但并没有与检测到它@
别名。
You can use configureWebpack or chainWebpack in vue.config.js to set your own aliases您可以使用configureWebpack或chainWebpack在vue.config.js设置自己的别名
vue.config.js
const path = require('path')
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@', path.resolve(__dirname, 'src/main/javascript'));
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.