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="">