[英]Vue-typescript error with webpack alias, path not found
I have a problem configuring webpack alias on a vue project with typescript. 我在使用打字稿的vue项目上配置webpack别名时遇到问题。 The same issue is not faced if I'm using normal javascript, hence my confusion 如果我使用普通的javascript,则不会遇到相同的问题,因此我很困惑
The project is divided in 2, "app_marketplace", "app_producer" (which is like the admin), I also have a 3rd folder for shared components and utilities. 该项目分为2个,“ app_marketplace”,“ app_producer”(类似于admin),我还有一个用于共享组件和实用程序的第3个文件夹。
Project folder structure: 项目文件夹结构:
I run the 2 app separately from the script in the package.json
. 我将2应用程序与package.json
的脚本分开运行。
For instance, "serve:marketplace": "vue-cli-service serve --mode marketplace src/app_marketplace/main.ts"
calls my .env.marketplace
file and sets the env
to VUE_APP_MARKETPLACE=true
例如, "serve:marketplace": "vue-cli-service serve --mode marketplace src/app_marketplace/main.ts"
调用我的.env.marketplace
文件,并将env
设置为VUE_APP_MARKETPLACE=true
Now, in my vue.config.js
I'm making use of the env variable to set the aliases. 现在,在我的vue.config.js
我正在使用env变量来设置别名。
configureWebpack: {
resolve: {
alias: {
'~': path.resolve(__dirname, 'src/app_shared'),
'@': path.resolve(__dirname, process.env.VUE_APP_MARKETPLACE ? 'src/app_marketplace' : 'src/app_producer')
}
}
}
The problem is that a lot of the imports don't work or give me error, starting from my main.ts
inside app_marketplace
. 问题是,从main.ts
内的app_marketplace
开始,许多导入无法正常工作或给我错误。 Another thing I can't explain is why some of them work and some don't. 我无法解释的另一件事是为什么其中一些有效而有些无效。
import App from './App.vue'
import router from '~/router' // ERROR
import store from '@/store' // ERROR
import '@/plugins'
import '~/directives'
import { DEBUG } from '~/const/debug' // ERROR
What am I doing wrong? 我究竟做错了什么?
Your tsconfig.json
should have a paths
config that matches your Webpack path aliases: tsconfig.json
应该具有与Webpack路径别名匹配的paths
配置:
{
"paths": {
"~/*": [
"src/app_shared/*",
],
"@/*": [
"src/*"
]
},
...
}
Since the file is JSON, you won't be able to do conditional path aliases in the file. 由于文件是JSON,因此您将无法在文件中执行条件路径别名。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.