vue alias别名配置
版本: @vue/cli 4.4.6两种方法都已测试过,可以使用vue-cli新版本中默认 src文件夹 可以直接使用 @node_modules@vue\cli-service\lib\config\base.js 里可以找到其他别名就需要在vue.config.js 中自行配置方法一:module.exports = {configureWebpack: {resolve: {a
·
版本: @vue/cli 4.4.6
两种方法都已测试过,可以使用
vue-cli新版本中默认 src文件夹 可以直接使用 @
node_modules@vue\cli-service\lib\config\base.js 里可以找到
其他别名就需要在vue.config.js 中自行配置
方法一:
module.exports = {
configureWebpack: {
resolve: {
alias: {
components: "@/components",
content: "@/components/content",
common: "@/components/common",
assets: "@/assets",
network: "@/network",
views: "@/views",
},
},
},
};
方法二:
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
chainWebpack: (config) => {
config.resolve.alias
.set("@", resolve("./src"))
.set("assets", resolve("./src/assets"))
.set("components", resolve("./src/components"))
.set("common", resolve("./src/components/common"))
.set("network", resolve("./src/network"))
.set("views", resolve("./src/views"))
.set("content", resolve("./src/components/content"));
},
};
方法二中set好像set不能直接引用@跟后面文件夹,我试了好多次都报错,最后只能这样妥协
最后,提醒css引用的时候记得加 “~” 符号,不然无法显示
比如
<img src="~assets/img/tabbar/category.svg" alt="">
啊呀呀,还有个忘了说,有些报错可能是你没有安装 path 插件
npm install path()
更多推荐
已为社区贡献1条内容
所有评论(0)