vue-cli3.5之vue.config.js

網(wǎng)上查的一些配置,方便查看江咳,有問題歡迎大家指出逢净,只是一些說明,方便查閱,不要拷貝爹土,會報錯I瘛!

module.exports = {

? // 部署應(yīng)用包時的基本URL胀茵。

? // https://www.app.com/ => '/'

? // https://www.app.com/my-app/ => '/my-app/'

? // 如果值為空字符串 '' 或者是相對路徑 './', 都會被鏈接為相對路徑

? //好像被廢棄了社露,使用publicPath 部署應(yīng)用包時的基本URL。用法和webpack本身的output.publicPath一致琼娘。

? //但在cli的其它地方也會用到這個值峭弟,所以請不要直接修改webpack的output.publicPath

? //baseUrl: process.env.NODE_ENV === 'production' ? '/' : '/',

? publicPath : '/',

? // 生成環(huán)境構(gòu)建文件的目錄。構(gòu)建時傳入 --no-clean 可關(guān)閉該行為

? outputDir: 'dist',

? // 放置生成的靜態(tài)資源(js, css, img, fonts)d的(相對于 outputDir 的)目錄

? assetsDir: '',

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

? indexPath: 'index.html',

? // 生成的靜態(tài)資源在它們的文件名中包含了hash以便更好的控制緩存脱拼。

? // 如果你無法使用Vue CLI生成的 index THML,你可以通過將這個選項設(shè)為 false 來關(guān)閉文件名哈希

? filenameHashing: true,

? pages: {

? ? index: {

? ? ? // 頁面入口

? ? ? entry: 'src/main.js',

? ? ? // 模板來源

? ? ? template: 'public/index.html',

? ? ? // 在 dist/index.html 的輸出

? ? ? filename: 'index.html',

? ? ? // 當(dāng)使用 title 選項時瞒瘸,

? ? ? // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>

? ? ? title: 'hello-world',

? ? ? // 在這個頁面中包含的塊,默認(rèn)情況下會包含提取出來的通用 chunk 和 vendor chunk

? ? ? chunks: [ 'chunk-vendors', 'chunk-common', 'index']

? ? },

? ? // 當(dāng)使用只有入口的字符串格式時熄浓,

? ? // 模板會被推導(dǎo)為 `public/subpage.html`

? ? // 并且如果找不到的話情臭,就回退到 `public/index.html`

? ? // 輸出文件名會被推導(dǎo)為 `subpage.html`

? ? subpage: 'src/main.js'

? },

? // 在生成構(gòu)建時禁用 eslint-loader

? lintOnSave: process.env.NODE_ENV !== 'production',

? // 是否使用包含運行時編譯器的Vue構(gòu)建版本,

? // 設(shè)置為 true 后你就可以在 Vue 組件中使用 template 選項了,但是這會讓你的應(yīng)用額外增加 10kb 左右

? runtimeCompiler: false,

? // 默認(rèn)情況下 babel-loader 會忽略所有 node_modules 中的文件赌蔑。如果你想要通過 Babel 顯式轉(zhuǎn)譯一個依賴俯在,可以在這個選項中列出來

? transpileDependencies: [],

? // 如果你不需要生產(chǎn)環(huán)境的 source map, 可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建

? productionSourceMap: true,

? // 設(shè)置生產(chǎn)的 HTML 中 <link rel="stylesheet"> 和 <script> 標(biāo)簽的 crossorigin 屬性

? // 需要注意的是該選項僅影響由 html-webpack-plugin 在構(gòu)建時注入的標(biāo)簽 - 直接寫在模板 (public/index.html) 中的標(biāo)簽不受影響

? crossorigin: undefined,

? integrity: false,

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

? // 值如果是一個函數(shù)娃惯,則會接收被解析的配置作為參數(shù)朝巫。

? // 該函數(shù)及可以修改配置并不返回任何東西,也可以返回一個被克隆或合并過的配置版本石景。

? // configureWebpack: {

? //? plugins: [

? //? ? new MyAwesomeWebpackPlugin()

? //? ]

? // },

? configureWebpack: config => {

? ? if (production.env.NODE_ENV === 'production') {

? ? ? // 為生產(chǎn)環(huán)境修改配置...

? ? } else {

? ? ? // 為開發(fā)環(huán)境修改配置...

? ? }

? },

? // 鏈?zhǔn)讲僮?Vue CLI內(nèi)部的 webpack 配置是通過 webpack-chain 維護(hù)的劈猿。

? // 這個庫提供了一個 webpack 原始配置的上層抽象,使其可以定義具名的 loader 規(guī)則和具名插件潮孽,并有機(jī)會在后期進(jìn)入這些規(guī)則并對它們的選項進(jìn)行修改

? chainWebpack: config => {

? ? config.module

? ? ? .rule('vue')

? ? ? .use('vue-loader')

? ? ? ? .loader('vue-loader')

? ? ? ? .tap(options => {

? ? ? ? ? // 修改它的選項

? ? ? ? ? return options

? ? ? ? })

? },

? // 如果想在 js 中作為 CSS Modules 導(dǎo)入 CSS 或其他預(yù)處理文件揪荣,該文件應(yīng)該以 *.module.(css|less|sass|scss|styl) 結(jié)尾

? // import styles from './foo.module.css'

? // import sassStyles from './foo.module.scss'

? //? 如果你想去掉文件名的 .module, 可以設(shè)置 vue.config.js 中的 css.modules 為 true

? css: {

? ? module: true,

? ? // 提取 CSS 在開發(fā)環(huán)境模式下是默認(rèn)不開啟的,因為它和 CSS 熱重載不兼容往史。

? ? // 然而仗颈,你仍然可以將這個值顯性地設(shè)置為 true 在所有情況下都強(qiáng)制提取

? ? expert: production.env.NODE_ENV === 'production' ? true : false,

? ? // 是否為 CSS 開啟 source map。設(shè)置為 true 之后可能會影響構(gòu)建的性能

? ? sourceMap: false,

? ? // 向 CSS 相關(guān)的 loader 傳遞選項

? ? loaderOptions: {

? ? ? css: {

? ? ? ? // 這里的選項會傳遞給 css-loader

? ? ? },

? ? ? postcss: {

? ? ? ? // 這里的選項會傳遞給 postcss-loader

? ? ? },

? ? ? sass: {

? ? ? ? // 所以這個假設(shè)你有 `src/variables.scss`

? ? ? ? // data: `@import "@/variables.scss";`

? ? ? }

? ? }

? },

? devServer: {

? ? // 在設(shè)置讓瀏覽器 overlay 同時顯示警告和錯誤

? ? overlay: {

? ? ? warnings: true,

? ? ? errors: true

? ? },

? ? proxy: {

? ? ? // '/api': {

? ? ? //? target: '<url>',

? ? ? //? ws: true,

? ? ? //? changeOrigin: true

? ? ? // },

? ? ? // '/foo': {

? ? ? //? target: '<other_url>'

? ? ? // }

? ? }

? },

? // 是否為 Babel 或 TypeScript 使用 threa-loader椎例。

? // 該選項在系統(tǒng)的 CPU 有多于一個內(nèi)核時自動啟用挨决,僅作用于生產(chǎn)構(gòu)建

? parallel: require('os').cpus().length > 1,

? pwa: {

? ? // 'GenerateSW'(默認(rèn)), 每次重建 web 應(yīng)用程序時都會生成一個新的服務(wù)工作文件。

? ? // 'InjectManifest' 允許您從現(xiàn)有的服務(wù)工作文件開始订歪,并創(chuàng)建該文件的副本脖祈,

? ? // 并在其中注入 "預(yù)先緩存清單"

? ? workboxPluginMode: 'GenerateSW',

? ? // workboxOptions:{

? ? //? swSrc: 'dev/sw.js'

? ? // }

? ? // 默認(rèn)值:"名稱"字段 package.json

? ? // 用作 apple-mobile-web-app-title 生成的 HTML 中元標(biāo)記的值。請注意刷晋,您需要進(jìn)行編輯 public/manifest.json 才能與之匹配

? ? // name: '',

? ? themeColor: '#4DBA87',

? ? msTileColor: '#000000',

? ? appleMobileWebAppCapable: 'no',

? ? appleMobileWebAppStatusBarStyle: 'default',

? ? // 如果您需要根據(jù)瀏覽器的緩存想 NOT 和 manifest 添加版本盖高,則使用此選項慎陵。

? ? // 這將附加 ?v=<pwa.assetsVersion> 到圖標(biāo)和清單的 URL 。

? ? assetsVersion: '',

? ? // 應(yīng)用程序清單的路徑

? ? manifestPath: 'manifest.json',

? ? iconPaths: {

? ? ? favicon32: 'img/icons/favicon-32x32.png',

? ? ? favicon16: 'img/icons/favicon-16x16.png',

? ? ? appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',

? ? ? maskIcon: 'img/icons/safari-pinned-tab.svg',

? ? ? msTileImage: 'img/icons/msapplication-icon-144x144.png',

? ? },

? },

? // 這是一個不進(jìn)行任何 schema(模式) 驗證的對象喻奥,因此它可以用來傳遞任何第三方插件選項席纽。

? pluginOptions: {

? ? foo: {

? ? ? // 插件可以作為 `options.pluginOptions.foo` 訪問這些選項

? ? }

? }

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市撞蚕,隨后出現(xiàn)的幾起案子润梯,更是在濱河造成了極大的恐慌,老刑警劉巖甥厦,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件仆救,死亡現(xiàn)場離奇詭異,居然都是意外死亡矫渔,警方通過查閱死者的電腦和手機(jī)彤蔽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來庙洼,“玉大人顿痪,你說我怎么就攤上這事∮凸唬” “怎么了蚁袭?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長石咬。 經(jīng)常有香客問我揩悄,道長,這世上最難降的妖魔是什么鬼悠? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任删性,我火速辦了婚禮,結(jié)果婚禮上焕窝,老公的妹妹穿的比我還像新娘蹬挺。我一直安慰自己,他們只是感情好它掂,可當(dāng)我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布巴帮。 她就那樣靜靜地躺著,像睡著了一般虐秋。 火紅的嫁衣襯著肌膚如雪榕茧。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天客给,我揣著相機(jī)與錄音用押,去河邊找鬼。 笑死起愈,一個胖子當(dāng)著我的面吹牛只恨,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播抬虽,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼官觅,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了阐污?” 一聲冷哼從身側(cè)響起休涤,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎笛辟,沒想到半個月后功氨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡手幢,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年捷凄,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片围来。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡跺涤,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出监透,到底是詐尸還是另有隱情桶错,我是刑警寧澤,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布胀蛮,位于F島的核電站院刁,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏粪狼。R本人自食惡果不足惜退腥,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望再榄。 院中可真熱鬧阅虫,春花似錦、人聲如沸不跟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽窝革。三九已至购城,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間虐译,已是汗流浹背瘪板。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留漆诽,地道東北人侮攀。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓锣枝,卻偏偏與公主長得像,于是被迫代替她去往敵國和親兰英。 傳聞我的和親對象是個殘疾皇子撇叁,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內(nèi)容