vue-cli3+工具中，配置路徑別名(vue.config.js)

vue-cli 2.x 版本創建項目時，我們可以在 build 文件夾下找到 webpack.base.conf.js 文件，在裏面修改 resolve.alias 即可。

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

但是vue-cli 3.0 創建項目時，目錄結構精簡化，找不到 build 和 config 文件夾，那麼該如何修改路徑別名呢？

只需要在項目根目錄下，新建vue.config.js文件，代碼如下：

const path = require('path');//引入path模塊
function resolve(dir){
    return path.join(__dirname,dir)//path.join(__dirname)設置絕對路徑
}


module.exports={
   
    chainWebpack:(config)=>{
        config.resolve.alias
        //set第一個參數：設置的別名，第二個參數：設置的路徑
        .set('@',resolve('./src'))
        .set('components',resolve('./src/components'))
        .set('assets',resolve('./src/assets'))
        .set('views',resolve('./src/views'))
        .set('network',resolve('./src/network'))
        //注意 store 和 router 沒必要配置
　　　　
    }
}

配置好想用的路徑別名後，重新啓動項目，再引入文件時，使用別名即可
配置路徑前：

import my from "../views/my/My.vue";

配置路徑後(不用再擔心文件層級關係)：

import my from "views/my/My.vue";

注意，引用別名時如果是HTML中的路徑，則需要在別名前面加符號~

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