前言

使用 webpack 構(gòu)建過 Vue 項目的同學(xué)應(yīng)該知道 alias 的作用，我們可以使用它將復(fù)雜的文件路徑定義成一個變量來訪問。在不使用 alias 的項目中，我們引入文件的時候通常會去計算被引入文件對于引入它的文件的相對路徑，比如像這樣

import HelloWorld from '../../../../HelloWorld.vue'

一旦相對層次結(jié)構(gòu)較深，我們就很難去定位所引入文件的具體位置，其實這并不是我們應(yīng)該操心的地方，完全可以交給 webpack 來進(jìn)行處理。在原生的 webpack 配置中我們可以定義 alias 來解決這一問題：

const path = require('path')const resolve = dir => { return path.join(__dirname, dir)}module.exports = { ...  resolve: { alias: { '@': resolve('src'), // 定義 src 目錄變量 _lib: resolve('src/common'), // 定義 common 目錄變量, _com: resolve('src/components'), // 定義 components 目錄變量, _img: resolve('src/images'), // 定義 images 目錄變量, _ser: resolve('src/services'), // 定義 services 目錄變量, } },  ...}

上方我們在 webpack resolve （解析）對象下配置 alias 的值，將常用的一些路徑賦值給了我們自定義的變量，這樣我們便可以將第一個例子簡化為：

import HelloWorld from '_com/HelloWorld.vue'

而在 CLI 3.x 中我們無法直接操作 webpack 的配置文件，我們需要通過 chainWebpack 來進(jìn)行間接修改，代碼如下

/* vue.config.js */module.exports = { ...  chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) .set('_lib', resolve('src/common')) .set('_com', resolve('src/components')) .set('_img', resolve('src/images')) .set('_ser', resolve('src/services')) },  ...}

這樣我們修改 webpack alias 來簡化路徑的優(yōu)化就實現(xiàn)了。但是需要注意的是對于在樣式及 html 模板中引用路徑的簡寫時，前面需要加上 ～ 符，否則路徑解析會失敗，如：

.img { background: (~_img/home.png);}

二、整合功能模塊

在多頁應(yīng)用的構(gòu)建中，由于存在多個入口文件，因此會出現(xiàn)重復(fù)書寫相同入口配置的情況，這樣對于后期的修改和維護(hù)都不是特別友好，需要修改所有入口文件的相同配置，比如在 index 單頁的入口中我們引用了 VConsole 及 performance 的配置，同時在 Vue 實例上還添加了 $openRouter 方法：

import Vue from 'vue'import App from './index.vue'import router from './router'import store from '@/store/'import { Navigator } from '../../common'// 如果是非線上環(huán)境，不加載 VConsoleif (process.env.NODE_ENV !== 'production') { var VConsole = require('vconsole/dist/vconsole.min.js'); var vConsole = new VConsole(); Vue.config.performance = true;}Vue.$openRouter = Vue.prototype.$openRouter = Navigator.openRouter;new Vue({ router, store, render: h => h(App)}).$mount('#app')