vue_cli4的路徑別名的配置

在開發vue的項目中，我們肯定需要對路徑進行配置，因為在各個文件中，導入文件什么的，使用./、和 ../這種格式的相對路徑，就比較的煩，要對路徑的結構相當的熟悉，而且難以維護。所以我們就要去設置別名（alias）

所以需要配置一個JS文件，名字為vue.config.js，與package.json同級。

配置代碼如下：

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 沒必要配置
　　　　
    }
}

上面這個配置就是對vue項目的大致目錄的配置，但是我的個人習慣，就只會配置第一個，使用@這個簡介路徑就可以了。因為這樣也同樣使我的結構更加的清楚，看自己的喜好吧！