Vue cli 3 project alias src to @ or ~/ not working
Solution 1
The complete example:
const path = require("path");
const vueSrc = "./src";
module.exports = {
runtimeCompiler: true,
css: {
modules: true
},
configureWebpack: {
resolve: {
alias: {
"@": path.resolve(__dirname, vueSrc)
},
extensions: ['.js', '.vue', '.json']
}
}
};
Although I am not sure that extensions is the solution to the problem you had. This will just add the extensions in case you haven't written those in the import definition: https://webpack.js.org/configuration/resolve/#resolveextensions
I have a feeling it was rather a problem with the missing /
. So instead of @components/Permissions/PermissionsTable
it should have been @/components/Permissions/PermissionsTable
because you did not add a /
at the end of your vueSrc
. So webpack will just attach it to ./src
like this: ./srccomponents/Permissions/PermissionsTable
.
Solution 2
I was missing extensions: ['.js', '.vue', '.json'],
and in the import I have to use '@/components/...'
Solution 3
For Vue CLI you need to create a file in the root folder of project - jsconfig.json
{
"include": ["./src/**/*"],
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["./*"]
}
},
"exclude": ["node_modules"]
}
and that's all, helped me with PhpStorm
Carlos Salazar
I'm a young person that have a passion form web developing, i am a full-stack developer that is more passionate about the back-end, soving problem is what i do and i do it great.
Updated on July 18, 2022Comments
-
Carlos Salazar almost 2 years
I have installed the project with
vue cli 3
but as the project grows, the import on the components are getting ugly, I end up importing a component likeimport Component from '../../../../components/folder/Component.vue'
I just want to alias the src folder and do
import Component from '@components/folder/Component.vue'
I did read that I have to modify the
vue.config.js
, I have done it but the error is the sameModule not found: Error: Can't resolve '@components/Permissions/PermissionsTable'
This is my vue.config.js
const path = require("path"); const vueSrc = "./src"; module.exports = { runtimeCompiler: true, css: { modules: true }, configureWebpack: { resolve: { alias: { "@": path.join(__dirname, vueSrc) } } } };
Am I missing something? What else should I do?
-
Benjamin Seche about 4 yearsCan you give your entire webpack configutation code so other people with same issue/question can rely on ? ty