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: {
      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()