vue aliasConfig(模塊別名配置)

　　今天研究了下鵬哥搭建的項目代碼，一個人搗鼓了半天模塊別名配置，邊寫邊測試，才慢慢明白，所有寫下來當個筆記：

　　在vue項目中，經常根據需要引入不同的功能模塊，默認情況下我們通過代碼 import moduleTest from '@/views/test/hello.vue'這樣的形式去進行引入操作，這里的@符號代表什么意思呢，在使用vue腳手架vue-cli搭建起來的項目中，在根目錄下的build/webpack.base.config.js中，有下面這樣的一段代碼：

　　

　　紅色框圈起來的部分的@符號即我們引入模塊時的@符號，這里的意思是使用@符號指代根目錄下的src文件夾路徑，這樣通過@/就可以輕松引入src文件夾下的文件了，但是會有個問題，如果我們需要引入的組件在src下一個比較深的文件夾中，引入的時候就得寫很多層的路徑，只是一次引入還好，多次引入的話，路徑寫起來腦殼都疼，所以進行模塊別名配置就能友好的解決這個問題了。

　　模塊別名配置，就是先一次性的配置好模塊的別名以及對應的路徑，在引入模塊的地方通過引入模塊別名就行了，在某些模塊被頻繁調用的情況下非常適合，下面說一下整個配置過程：

　　（一）首先在根目錄下新建一個文件夾aliasConfig，然后在aliasConfig下新建一個叫module.config.js的文件，項目結構如下：

　　（二）打開module.config.js文件，編輯內容，如下

/**
 * author lh
 * date 2019-4-1
 *
 */

'use static'
var path = require('path')
var srcDir = path.resolve(process.cwd(), 'src')

module.exports = {
  vue$: 'vue/dist/vue.esm',

  HelloWorld: srcDir + '/components/HelloWorld.vue',
  testVue: srcDir + '/views/test.vue'
}

　　這里前面第二三行代碼的意思是：通過設置nodeJS的路徑處理模塊path的組合路徑方法（詳細方法內容請看Nodejs基礎：路徑處理模塊path總結），將srcDir指向項目根目錄下的src的路徑地址，module.exports對象中的鍵值對就是我們配置的別名跟別名對應的路徑，設置好后，在需要的地方引入別名即可，代碼如下：

import '模塊名稱' from '模塊別名'

　　（三）模塊別名文件配置好后，需要在build/webpack.base.config.js中修改最上面圖的紅圈部分的內容，修改內容如下：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: vueModuleConfig
},

 

　　（四）修改保存好后，需要重新npm run dev啟動項目代碼，然后引入模塊別名，發現已經可以正常引入了，感覺還是有點好玩的，繼續學習去了...