vue aliasConfig(模塊別名配置) Nodejs基礎：路徑處理模塊path總結

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

　　在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啓動項目代碼，而後引入模塊別名，發現已經能夠正常引入了，感受仍是有點好玩的，繼續學習去了...