Vue CLI 的官方文檔上寫：調整webpack配置最簡單的方式就是在vue.config.js中的configureWebpack選項提供一個對象。
Vue CLI 內部的 webpack 配置是通過 webpack-chain (鏈式操作)維護的。這個庫提供了一個 webpack 原始配置的上層抽象，使其可以定義具名的 loader 規則和具名插件，並有機會在后期進入這些規則並對它們的選項進行修改。
它允許我們更細粒度的控制其內部配置。接下來有一個在 vue.config.js 中的 chainWebpack修改的例子。
// 直接引用node中自帶的模塊
const path = require('path');
// __dirname 總是指向被執行 js 文件的絕對路徑,也就是說你在E:\web\test\vue.config.js中寫__dirname那么路徑就是E:\web\test
function resolve (dir) {
// 例如path.join(__dirname,'src')輸出 E:\web\test\src
return path.join(__dirname, dir) } module.exports = {
// 設置代理 devServer: { port: 8080, proxy: { "/gateway": { target: "http://aaa.com/", changeOrigin: true,
pathRewrite: { "^/app/": "/app/" } } } },
// 設置是否在開發環境下每次保存代碼時都啟用eslint驗證。
// true 開啟每次保存都進行檢測，效果與warning一樣
lintOnSave: true, chainWebpack: config => { config.resolve.alias .set("home", resolve("src/views/home")) .set("utils", resolve("src/utils")) } };
官方的文檔中寫到：
配置 resolve 別名
config.resolve.alias : ChainedMap config.resolve.alias .set(key, value) .set(key, value) .delete(key) .clear()
resolve的的一個屬性alias（別名）。
在這里，我們在全局配只一個別名，這樣我們在其它地方在調用home目錄里的文件時，我們就可以省下一些路徑，直接用home代替就好啦例如
例如下面的圖片是我的src下面的目錄
這里是我router.js的引用。
是不是 看起來就方便了很多呢！
以上就是我的理解，希望大家多多提出意見！