文章目錄

• • 屬性說明
  • 常用完整配置

屬性說明

vue.config.js是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。

若沒有vue.config.js文件可以自行在根目錄創建。

// vue.config.js module.exports = {// 選項 }

baseUrl
從 Vue CLI 3.3 起已棄用，請使用publicPath。

publicPath

• 默認：'/'

部署應用包時的基本 URL，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，如果是部署在一個子路徑上，比如在https://www.my-app.com/my-app/，則設置publicPath: /my-app/。
這個值也可以被設置為空字符串 ('') 或是相對路徑 ('./')，這樣所有的資源都會被鏈接為相對路徑，方便遷移。

相對publicPath的限制，在以下情況下，應當避免使用相對 publicPath:：

• 當使用基于 HTML5 history.pushState 的路由時；
• 當使用 pages 選項構建多頁面應用時。

outputDir

• 默認：‘dist’

當運行vue-cli-service build時生成的生產環境構建文件的目錄。注意目標目錄在構建之前會被清除 (構建時傳入--no-clean 可關閉該行為)。

請始終使用outputDir而不要修改 webpack 的output.path。

assetsDir

• 默認：''

放置生成的靜態資源 (js、css、img、fonts)的 (相對于 outputDir 的) 目錄。

從生成的資源覆寫 filename 或 chunkFilename 時，assetsDir 會被忽略。

indexPath

• 默認：'index.html'

指定生成的index.html 的輸出路徑 (相對于 outputDir)。也可以是一個絕對路徑。

filenameHashing

• 默認：true

默認情況下，生成的靜態資源在它們的文件名中包含了hash 以便更好的控制緩存。然而，這也要求index的 HTML 是被 Vue CLI自動生成的。如果你無法使用 Vue CLI 生成的 index HTML，你可以通過將這個選項設為false 來關閉文件名哈希。

pages

• 默認：undefined

在 multi-page 模式下構建應用。每個“page”應該有一個對應的 JavaScript 入口文件。其值應該是一個對象，對象的 key 是入口的名字，value 可以是對象或字符串，類似：

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 (可選值：‘warning’ | ‘default’ | ‘error’)

是否在開發環境下通過eslint-loader在每次保存時lint代碼。這個值會在 @vue/cli-plugin-eslint被安裝之后生效。

值說明

true / ‘warning’	編譯警告，僅僅會被輸出到命令行，且不會使得編譯失敗
default	錯誤在開發時直接顯示在瀏覽器中，編譯錯誤，同時也意味著 lint 錯誤將會導致編譯失敗
error	編譯錯誤，導致編譯失敗

runtimeCompiler

• 默認：false

是否使用包含運行時編譯器的 Vue 構建版本。設置為 true 后你就可以在 Vue 組件中使用 template選項了，但是這會讓你的應用額外增加 10kb 左右。

在使用函數式組件的時候就需要配置true了

transpileDependencies

• 默認：[]

默認情況下babel-loader會忽略所有 node_modules中的文件。如果你想要通過 Babel 顯式轉譯一個依賴，可以在這個選項中列出來。

productionSourceMap

• 默認：true

如果你不需要生產環境的 source map，可以將其設置為false 以加速生產環境構建。

crossorigin

• 默認：undefined

設置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標簽的 crossorigin 屬性。

需要注意的是該選項僅影響由 html-webpack-plugin 在構建時注入的標簽 - 直接寫在模版(public/index.html)中的標簽不受影響。

integrity

• 默認：false

在生成的 HTML 中的<link rel="stylesheet"> 和<script>標簽上啟用Subresource Integrity (SRI)。如果你構建后的文件是部署在 CDN 上的，啟用該選項可以提供額外的安全性。

需要注意的是該選項僅影響由 html-webpack-plugin 在構建時注入的標簽 - 直接寫在模版(public/index.html) 中的標簽不受影響。
另外，當啟用 SRI 時，preload resource hints 會被禁用，因為 Chrome 的一個 bug 會導致文件被下載兩次。

configureWebpack

如果這個值是一個對象，則會通過 webpack-merge合并到最終的配置中。

如果這個值是一個函數，則會接收被解析的配置作為參數。該函數既可以修改配置并不返回任何東西，也可以返回一個被克隆或合并過的配置版本。
配合 webpack > 簡單的配置方式

chainWebpack

是一個函數，會接收一個基于 webpack-chain 的 ChainableConfig實例。允許對內部的webpack配置進行更細粒度的修改。
配合 webpack > 鏈式操作

**css.modules **
從 v4 起已棄用，請使用css.requireModuleExtension。 在 v3 中，這個選項含義與 css.requireModuleExtension相反。

css.requireModuleExtension

• 默認：true

默認情況下，只有 *.module.[ext]結尾的文件才會被視作CSS Modules 模塊。設置為 false后你就可以去掉文件名中的.module并將所有的 *.(css|scss|sass|less|styl(us)?)文件視為 CSS Modules模塊。

如果你在 css.loaderOptions.css里配置了自定義的 CSS Module選項，則 css.requireModuleExtension必須被顯式地指定為true或者false，否則我們無法確定你是否希望將這些自定義配置應用到所有 CSS文件中。

css.extract

• 默認：生產環境下是 true，開發環境下是 false

是否將組件中的 CSS 提取至一個獨立的 CSS 文件中 (而不是動態注入到 JavaScript中的inline代碼)。
同樣當構建 Web Components組件時它總是會被禁用 (樣式是 inline 的并注入到了 shadowRoot 中)。

當作為一個庫構建時，你也可以將其設置為false免得用戶自己導入 CSS。

提取 CSS 在開發環境模式下是默認不開啟的，因為它和 CSS 熱重載不兼容。然而，你仍然可以將這個值顯性地設置為 true 在所有情況下都強制提取。

css.sourceMap

• 默認：false

是否為 CSS 開啟 source map。設置為true之后可能會影響構建的性能。

css.loaderOptions

• 默認：{}

module.exports = {css: {loaderOptions: {css: {// 這里的選項會傳遞給 css-loader},postcss: {// 這里的選項會傳遞給 postcss-loader}}} }

支持的 loader 有：

• css-loader
• postcss-loader
• sass-loader
• less-loader
• stylus-loader

另外，也可以使用 scss 選項，針對scss 語法進行單獨配置（區別于sass語法）。

相比于使用chainWebpack 手動指定loader更推薦上面這樣做，因為這些選項需要應用在使用了相應 loader的多個地方。

devServer
所有webpack-dev-server的選項都支持。
注意：

• 有些值像 host、port和 https 可能會被命令行參數覆寫。
• 有些值像 publicPath 和 historyApiFallback 不應該被修改，因為它們需要和開發服務器的 publicPath 同步以保障正常的工作。

devServer.proxy
如果你的前端應用和后端 API 服務器沒有運行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 服務器。這個問題可以通過vue.config.js 中的 devServer.proxy 選項來配置。

module.exports = {devServer: {proxy: 'http://localhost:6666'} }

這會告訴開發服務器將任何未知請求 (沒有匹配到靜態文件的請求) 代理到http://localhost:6666。如果你想要更多的代理控制行為，請查看官網說明。

parallel

• 默認：require('os').cpus().length > 1

是否為 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多于一個內核時自動啟用，僅作用于生產構建。

pwa
向 PWA 插件傳遞選項

pluginOptions
這是一個不進行任何 schema 驗證的對象，因此它可以用來傳遞任何第三方插件選項。例如：

module.exports = {pluginOptions: {foo: {// 插件可以作為 `options.pluginOptions.foo` 訪問這些選項。}} }

常用完整配置

module.exports = {// 部署應用時的基本路徑 URL，baseUrl從 Vue CLI 3.3 起，已棄用，使用publicPath來替代publicPath: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080',// build時構建文件的目錄，構建時傳入 --no-clean 可關閉該行為outputDir: 'dist', // 當運行 vue-cli-service build 時生成的生產環境構建文件的目錄// build時放置生成的靜態資源 (js、css、img、fonts) 的 (相對于 outputDir 的) 目錄assetsDir: '',// 指定生成的 index.html 的輸出路徑 (相對于 outputDir)。也可以是一個絕對路徑。indexPath: 'index.html',// 默認在生成的靜態資源文件名中包含hash以控制緩存filenameHashing: true,// 構建多頁面應用，頁面的配置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'},// 是否在開發環境下通過 eslint-loader 在每次保存時 lint 代碼 (在生產構建時禁用 eslint-loader)lintOnSave: process.env.NODE_ENV !== 'production',// 是否使用包含運行時編譯器的 Vue 構建版本runtimeCompiler: false,// Babel 顯式轉譯列表transpileDependencies: [],// 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建productionSourceMap: true,// 設置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標簽的 crossorigin 屬性// （注：僅影響構建時注入的標簽）crossorigin: '',// 在生成的 HTML 中的<link rel="stylesheet">和<script>標簽上啟用 Subresource Integrity (SRI)integrity: false,// 如果這個值是一個對象，則會通過 webpack-merge 合并到最終的配置中// 如果你需要基于環境有條件地配置行為，或者想要直接修改配置，那就換成一個函數 (該函數會在環境變量被設置之后懶執行)。該方法的第一個參數會收到已經解析好的配置。在函數內，你可以直接修改配置，或者返回一個將會被合并的對象configureWebpack: {},// 對內部的 webpack 配置（比如修改、增加Loader選項）(鏈式操作)chainWebpack: () =>{},// css的處理css: {// 當為true時，css文件名可省略 module 默認為 falsemodules: true,// 是否將組件中的 CSS 提取至一個獨立的 CSS 文件中,當作為一個庫構建時，你也可以將其設置為 false 免得用戶自己導入 CSS// 默認生產環境下是 true，開發環境下是 falseextract: false,// 是否為 CSS 開啟 source map。設置為 true 之后可能會影響構建的性能sourceMap: false,//向 CSS 相關的 loader 傳遞選項(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)loaderOptions: {css: {},less: {}}},// 所有 webpack-dev-server 的選項都支持devServer: {open: true, // 設置瀏覽器自動打開項目port: 8888, // 設置端口proxy: { // 設置代理'/api': {target: 'http://101.15.22.98',changeOrigin: true // 開啟跨域// secure: true, // 如果是https接口，需要配置這個參數}}},// 是否為 Babel 或 TypeScript 使用 thread-loaderparallel: require('os').cpus().length > 1,// 向 PWA 插件傳遞選項pwa: {},// 可以用來傳遞任何第三方插件選項pluginOptions: {} }

總結

以上是生活随笔為你收集整理的vue.config.js 配置参考的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。