vue.config.js 笔记

使用webpack的别名alias配置,常用@

项目中使用引入文件有时候路径比较深，需要使用"../../../xx.js"这种类似的路劲引入，可以使用webpack的别名alias配置来解决。
首先，先确定项目中node_module下是否有path模块，如下图

image.png

没有的话，需要安装

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"));
    },
}