Vue CLI 3.0帶來(lái)了一些很棒的新功能，其中一個(gè)就是可以對(duì) 項(xiàng)目的目錄結(jié)構(gòu) 進(jìn)行更好的控制。其中之一是vue.config.js文件的引入，這個(gè)文件可以包含 Vue CLI 官方提供的大多數(shù)選項(xiàng)的轉(zhuǎn)換配置，以及項(xiàng)目特定的配置。

// 一個(gè)基本的配置文件示例
module.exports = {
// 選項(xiàng)...
}

為了使用vue.config.js，只需將它放置在項(xiàng)目根文件夾中，Vue CLI 自動(dòng)生成的配置將會(huì)基于它增強(qiáng)。在 Vue CLI 初始化或通過(guò) vue init 命令創(chuàng)建的項(xiàng)目中，都應(yīng)該有一個(gè) vue.config.js 文件?；镜腣ue CLI初始化項(xiàng)目應(yīng)該長(zhǎng)這樣：

my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.vue
main.js
vue.config.js

當(dāng)配置被提供的時(shí)候，它會(huì)被按照以下順序依次調(diào)用（如果存在同名的選項(xiàng)，后者會(huì)覆蓋前者）：

1. 命令行選項(xiàng)
2. vue.config.js 中的選項(xiàng)

下面是一個(gè)自定義 outputDir 的例子

// vue.config.js
module.exports = {
outputDir: 'myOutputDir'
}

在這個(gè)示例中，運(yùn)行 npm run build 時(shí)，生成的構(gòu)建文件將被放置在 myOutputDir 目錄。這也有助于通過(guò)不將構(gòu)建文件與應(yīng)用程序代碼混合在一起的方式來(lái)管理生成代碼。Vue CLI將會(huì)使用該選項(xiàng)進(jìn)行優(yōu)化（例如可以通過(guò)自動(dòng)生成 index.html，從而避免將輸出文件與index.html簽出源代碼管理）。