關於Vue 配置config 檔案詳解

有些針對@vue/cli的全域性配置，例如你慣用的包管理器和你本地儲存的 preset，都儲存在 home 目錄下乙個名叫.vuerc的 json 檔案。你可以用編輯器直接編輯這個檔案來更改已儲存的選項。

你也可以使用vue config命令來審查或修改全域性的 cli 配置。

請查閱指南中的瀏覽器相容性章節。

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

這個檔案應該匯出乙個包含了選項的物件：

// vue.config.js
module.exports =

// const path = require('path');
module.exports = ,
// chainwebpack: () => else 
// },
configurewebpack: () => ,
// configurewebpack: () => ),
// new bundleanalyzerplugin(),
// ];
// //開發環境
// let pluginsdev = [
// new vconsoleplugin(),
// ];
// if (process.env.node_env === 'production') else 
// },
// css 相關選項
css: 
},// 啟用 css modules for all css / pre-processor files.
modules: false
},// 構建時開啟多程序處理 babel 編譯
//是否為 babel 或 typescript 使用 thread-loader。
//該選項在系統的 cpu 有多於乙個核心時自動啟用，僅作用於生產構建，在適當的時候開啟幾個子程序去併發的執行壓縮
parallel: require("os").cpus().length > 1,
// pwa 外掛程式相關配置
// 單頁外掛程式相關配置 
pwa: {},
devserver: 
// }
},// vue 2.0 設定跨域
// dev: 
// // }
// // },
// },
// 是否啟用dll webpack dll
// 關於dll只做簡單解釋 未附詳細**
// webpack.dll.conf.js
// 1、entry配置需要dll打包的庫
// 2、module配置處理對應檔案型別的loader
// 3、增加 webpack.dllplugin外掛程式
// (1)、path:生成mainfest.json檔案的絕對路徑。mainfest.json裡面的內容為所有被打包到dll.js檔案模組id的對映。
// (2)、name：webpack打包時mainfest.json包含的庫的暴露出來的函式名名
// (3)、contenxt(可選):引入manifest檔案的context，預設為webpack的context
// dll: false,//配置好dll庫，設定dll：true；可優化打包效率。減少打包時間，增加庫快取
// 第三方外掛程式配置
pluginoptions: {},
// pluginoptions: 
// }
};

從 vue cli 3.3 起已棄用，請使用publicpath。

這個值在開發環境下同樣生效。如果你想把開發伺服器架設在根路徑，你可以使用乙個條件式的值：

module.exports =

module.exports = , // 當使用只有入口的字串格式時， // 模板會被推導為 `public/subpage.html` // 並且如果找不到的話，就回退到 `public/index.html`。 // 輸出檔名會被推導為 `subpage.html`。 subpage: 'src/subpage/main.js'

}}

提示

當在 multi-page 模式下構建時，webpack 配置會包含不一樣的外掛程式 (這時會存在多個html-webpack-plugin和preload-webpack-plugin的例項)。如果你試圖修改這些外掛程式的選項，請確認執行vue inspect。

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

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

更多細節可查閱：向預處理器 loader 傳遞選項

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

babel 可以通過babel.config.js進行配置。

提示vue cli 使用了 babel 7 中的新配置格式babel.config.js。和.babelrc或package.json中的babel字段不同，這個配置檔案不會使用基於檔案位置的方案，而是會一致地運用到專案根目錄以下的所有檔案，包括node_modules內部的依賴。我們推薦在 vue cli 專案中始終使用babel.config.js取代其它格式。

同時查閱指南中的 polyfill 章節。

eslint 可以通過.eslintrc或package.json中的eslintconfig欄位來配置。

更多細節可查閱 @vue/cli-plugin-eslint。

typescript 可以通過tsconfig.json來配置。

更多細節可查閱 @vue/cli-plugin-typescript。

更多細節可查閱 @vue/cli-plugin-unit-jest。

更多細節可查閱 @vue/cli-plugin-unit-mocha。

更多細節可查閱 @vue/cli-plugin-e2e-cypress。

更多細節可查閱 @vue/cli-plugin-e2e-nightwatch。

參考:

關於Vue 配置config 檔案詳解

vue打包後分離config配置檔案

ssh配置config檔案

讀取配置config檔案

關於Vue 配置config 檔案詳解

vue打包後分離config配置檔案

ssh配置config檔案

讀取配置config檔案

相關推薦