vue-cli3配置路径别名

在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("views", resolve("src/views"))
        // .set("base", resolve("baseConfig"))
        // .set("public", resolve("public"));
  },
}

配置好想用的路径别名后，重新启动项目，再引入文件时，使用别名即可 配置路径前：

import my from "../views/profile/Profile.vue"; 

　配置路径后(不用再担心文件层级关系)：

import my from "views/profile/Profile.vue"; 

注意，引用别名时如果是html中的路径，则需要在别名前面加符号~

<img slot="item-icon"  src="~assets/img/tabbar/cart.svg" alt="">