使用webpack的别名alias配置,常用@
项目中使用引入文件有时候路径比较深,需要使用"../../../xx.js"这种类似的路劲引入,可以使用webpack的别名alias配置来解决。
首先,先确定项目中node_module下是否有path模块,如下图
没有的话,需要安装
npm install path --save
在vue.config.js中添加代码如下:
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("base", resolve("baseConfig"))
.set("public", resolve("public"));
},
}