這里我只寫基本作用與概念，詳細使用方式可以看官網
https://cli.vuejs.org/zh/config/
vue.config.js 基本配置
publicPath
默認值：/
部署應用包時的基本 URL
用法和 webpack 本身的 output.publicPath 一致
但是 Vue CLI 在一些其他地方也需要用到這個值
所以請始終使用 publicPath 而不要直接修改 webpack 的 output.publicPath
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
}
outputDir
默認值：dist
當運行 vue-cli-service build 時生成的生產環境構建文件的目錄
請始終使用 outputDir 而不要修改 webpack 的 output.path
assetsDir
默認值： ''
放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
indexPath
默認值：'index.html'
指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也可以是一個絕對路徑。
filenameHashing
默認值：true
默認情況下，生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存
pages
默認值：undefined
在 multi-page 模式下構建應用。
每個“page”應該有一個對應的 JavaScript 入口文件。
其值應該是一個對象，對象的 key 是入口的名字，value 是：
- 一個指定了 entry, template, filename, title 和 chunks 的對象 (除了 entry 之外都是可選的)；
- 或一個指定其 entry 的字符串。
module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板來源
template: 'public/index.html',
// 在 dist/index.html 的輸出
filename: 'index.html',
// 當使用 title 選項時，
// template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在這個頁面中包含的塊，默認情況下會包含
// 提取出來的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 當使用只有入口的字符串格式時，
// 模板會被推導為 `public/subpage.html`
// 並且如果找不到的話，就回退到 `public/index.html`。
// 輸出文件名會被推導為 `subpage.html`。
subpage: 'src/subpage/main.js'
}
}
lintOnSave
默認值：default
是否在開發環境下通過 eslint-loader 在每次保存時 lint 代碼。
這個值會在 @vue/cli-plugin-eslint 被安裝之后生效
取值情況：
- true/warning
- eslint-loader 會將
lint 錯誤輸出為編譯警告,不會使得編譯失敗
- eslint-loader 會將
- default
- eslint-loader 將
lint 錯誤輸出為編譯錯誤，同時也意味着lint 錯誤將會導致編譯失敗
- eslint-loader 將
- error
- eslint-loader 把
lint 警告也輸出為編譯錯誤，這意味着lint 警告將會導致編譯失敗。
- eslint-loader 把
runtimeCompiler
默認值：false
是否使用包含運行時編譯器的 Vue 構建版本。
設置為 true 后你就可以在 Vue 組件中使用 template 選項了，但是這會讓你的應用額外增加 10kb 左右
transpileDependencies
默認值：[]
默認情況下 babel-loader 會忽略所有 node_modules 中的文件。
如果你想要通過 Babel 顯式轉譯一個依賴，可以在這個選項中列出來
productionSourceMap
默認值：true
如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建
crossorigin
默認值：undefined
設置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標簽的 crossorigin 屬性
integrity
默認值： false
在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標簽上啟用 Subresource Integrity (SRI)
當啟用 SRI 時，preload resource hints 會被禁用
configureWebpack
-
如果這個值是一個對象，則會通過 webpack-merge 合並到最終的配置中。
-
如果這個值是一個函數，則會接收被解析的配置作為參數。
- 該函數既可以修改配置並不返回任何東西，也可以返回一個被克隆或合並過的配置版本
chainWebpack
是一個函數，會接收一個基於 webpack-chain 的 ChainableConfig 實例。
允許對內部的 webpack 配置進行更細粒度的修改
css.requireModuleExtension
默認值：true
*默認情況下，只有 .module.[ext] 結尾的文件才會被視作 CSS Modules 模塊
css.extract
默認值：生產為 true，開發為 false
是否將組件中的 CSS 提取至一個獨立的 CSS 文件中
css.sourceMap
默認值：false
是否為 CSS 開啟 source map
css.loaderOptions
默認值：{}
向 CSS 相關的 loader 傳遞選項
module.exports = {
css: {
loaderOptions: {
css: {
// 這里的選項會傳遞給 css-loader
},
postcss: {
// 這里的選項會傳遞給 postcss-loader
}
}
}
}
可支持 css\postcss\sass\less\stylus-loader
也可以使用 scss 選項，針對 scss 語法進行單獨配置
devServer
所有 webpack-dev-server 的選項都支持。注意：
- 有些值像 host、port 和 https 可能會被命令行參數覆寫。
- 有些值像 publicPath 和 historyApiFallback 不應該被修改，因為它們需要和開發服務器的 publicPath 同步以保障正常的工作
devServer.proxy
代理：
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>', // 需要代理的實際生產環境地址
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
},
// proxy: 'http://localhost:4000'
}
}
parallel
默認值：require('os').cpus().length > 1
是否為 Babel 或 TypeScript 使用 thread-loader。
該選項在系統的 CPU 有多於一個內核時自動啟用，僅作用於生產構建
pwa
向 PWA 插件傳遞選項
pluginOptions
傳遞任何第三方插件選項
module.exports = {
pluginOptions: {
foo: {
// 插件可以作為 `options.pluginOptions.foo` 訪問這些選項。
}
}
}
Babel
在 vuecli 中，使用 babel.config.js 作為 babel 的配置文件
ESLint
在 vuecli 中，使用 .eslintrc 或 package.json 中的 eslintConfig 字段配置
TypeScript
在 vuecli 中，使用 tsconfig.json 來配置