[英]Vue cli 3 project alias src to @ or ~/ not working
我已经使用vue cli 3
安装了该项目,但是随着项目的增长,组件的导入变得越来越难看,我最终导入了一个类似的组件
import Component from '../../../../components/folder/Component.vue'
我只想给 src 文件夹取别名然后做
import Component from '@components/folder/Component.vue'
我确实读到我必须修改 vue.config.js,我已经完成了但错误是一样的
Module not found: Error: Can't resolve '@components/Permissions/PermissionsTable'
这是我的 vue.config.js
const path = require("path");
const vueSrc = "./src";
module.exports = {
runtimeCompiler: true,
css: {
modules: true
},
configureWebpack: {
resolve: {
alias: {
"@": path.join(__dirname, vueSrc)
}
}
}
};
我错过了什么吗? 我还应该做什么?
完整示例:
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']
}
}
};
尽管我不确定扩展是否可以解决您遇到的问题。 如果您没有在导入定义中编写扩展,这只会添加扩展:https ://webpack.js.org/configuration/resolve/#resolveextensions
我有一种感觉,这是缺少/
的问题。 因此,而不是@components/Permissions/PermissionsTable
它应该是@/components/Permissions/PermissionsTable
因为您没有在vueSrc
的末尾添加/
。 所以 webpack 会像这样将它附加到./src
: ./srccomponents/Permissions/PermissionsTable
。
我缺少extensions: ['.js', '.vue', '.json'],
并且在导入中我必须使用 '@/components/...'
对于 Vue CLI,您需要在项目的根文件夹中创建一个文件 - jsconfig.json
{
"include": ["./src/**/*"],
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["./*"]
}
},
"exclude": ["node_modules"]
}
就是这样,帮助我使用 PhpStorm
你有
import Component from '@components/folder/Component.vue'
但你需要
import Component from '@/components/folder/Component'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.