I have a problem configuring webpack alias on a vue project with typescript. The same issue is not faced if I'm using normal javascript, hence my confusion
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.
Project folder structure:
I run the 2 app separately from the script in the 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
Now, in my vue.config.js
I'm making use of the env variable to set the aliases.
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
. 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:
{
"paths": {
"~/*": [
"src/app_shared/*",
],
"@/*": [
"src/*"
]
},
...
}
Since the file is JSON, you won't be able to do conditional path aliases in the file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.