詳解如何配置vue-cli3.0的vue.config.js

更新時(shí)間：2018年08月23日 11:03:00 作者：神一半的男人

這篇文章主要介紹了詳解如何配置vue-cli3.0的vue.config.js，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了如何配置vue-cli3.0的vue.config.js，分享給大家，具體如下：

vue-cli 3 英文文檔
 vue-cli 3 中文文檔
 webpack 4 plugins
webpack-chain

TLDR

vue-cli 3 與 2 版本有很大區(qū)別

vue-cli 3 的 github 倉(cāng)庫(kù)由原有獨(dú)立的 github 倉(cāng)庫(kù)遷移到了 vue 項(xiàng)目下
vue-cli 3 的項(xiàng)目架構(gòu)完全拋棄了 vue-cli 2 的原有架構(gòu)，3 的設(shè)計(jì)更加抽象和簡(jiǎn)潔（此處后續(xù)可以詳細(xì)介紹）
vue-cli 3 是基于 webpack 4 打造，vue-cli 2 還是 webapck 3
vue-cli 3 的設(shè)計(jì)原則是“0配置”
vue-cli 3 提供了 vue ui 命令，提供了可視化配置，更加人性化

由于 vue-cli 3 也學(xué)習(xí)了 rollup 的零配置思路，所以項(xiàng)目初始化后，沒(méi)有了以前熟悉的 build 目錄，也就沒(méi)有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。

那么，我們?cè)撊绾稳ヅ渲米约旱捻?xiàng)目了？

其實(shí)這一切都是因?yàn)?vue-cli 3 的項(xiàng)目初始化，幫開(kāi)發(fā)者已經(jīng)解決了 80% ，甚至絕大部分情形下的 webpack 配置。

上述功能就是由 @vue/cli-service 依賴(lài)去處理，當(dāng)你打開(kāi) node_modules 目錄下 @vue 中的 cli-service 看一眼，是不是找到了熟悉的感覺(jué)？

說(shuō)了這么多，開(kāi)發(fā)者在實(shí)際開(kāi)發(fā)過(guò)程中，肯定還有需要自己去修改配置的地方，那么，該怎么做了？

這點(diǎn)就需要在項(xiàng)目根目錄下手動(dòng)新建一個(gè) vue.config.js，此處參考我提供的一個(gè)基礎(chǔ)模板 [[vue.config.js]]

所以現(xiàn)在所有的問(wèn)題都集中在了--- 我到底要怎么樣去修改這個(gè)配置文件？

一些簡(jiǎn)單的配置，比如多頁(yè)面、接口代理，大家可以自己去看下官方 doc ，文章最上面有提供。

如果需要改動(dòng)原本 webpack 的配置，該怎么做了？

因?yàn)?vue-cli 3 中的 cli-service 對(duì) webpack 4 引入了 webpack-chain 插件，同時(shí)對(duì)配置進(jìn)行了高度抽象化，所以開(kāi)發(fā)者想隨心所欲的修改配置，操作方式就比以前更加難。在我的親身實(shí)踐下，總結(jié)了幾點(diǎn)，供大家參考：

首先，修改點(diǎn)主要位于 vue.config.js 中的

configureWebpack: (config) => {
// 簡(jiǎn)單/基礎(chǔ)配置，比如引入一個(gè)新插件
},

chainWebpack: (config) => {
// 鏈?zhǔn)脚渲?
}

loaderOptions: {
   css: {
    // options here will be passed to css-loader
   },
   postcss: {
    // options here will be passed to postcss-loader
   }
}

具體操作可以看文章最上面的鏈接，此處不再贅述。

核心一點(diǎn)就是： cmd 中敲 vue inspect > output.js , 這樣我們會(huì)得到一份最終生效的 webpack 配置信息，省去了你自己去看 cli-service 源碼。

然后，我舉個(gè)栗子：

我的項(xiàng)目中，需要修改 eslint 的配置，讓它不去檢測(cè)我項(xiàng)目下的 src/lib 目錄，因?yàn)檫@里是外部庫(kù)文件（其實(shí)此處也可以在項(xiàng)目中直接新建一個(gè) .eslintignore文件去處理，但我這里選擇修改 webpack 文件）

第一步: vue inspect > output.js

第二步: 在 output.js 中搜索 eslint 相關(guān)配置，結(jié)果如下：