vue.config.js是什么捕犬？

1跷坝、vue.config.js 是一個可選的配置文件，可對vue-cli(webpack)自定義配置碉碉。
2柴钻、和 package.json 同級的，根目錄下
3垢粮、會被 @vue/cli-service 自動加載

1贴届、publicPath（Vue CLI 3.3 之前用baseUrl）

部署應(yīng)用包時的基本 URL，默認(rèn)值 / ，用來配置應(yīng)用包dist目錄下index.html引入資源路徑粱腻，例如庇配，如果你的應(yīng)用被部署在 https://12345/hjm/，則設(shè)置 publicPath 為 /hjm/绍些。
這個值也可以被設(shè)置為空字符串 ('') 或是相對路徑 ('./')捞慌，這樣所有的資源都會被鏈接為相對路徑，這樣打出來的包可以被部署在任意路徑柬批。注意：history模式的路由及多頁面應(yīng)用時publicPath避免使用相對路徑('./')啸澡。

image.png

image.png

2、outputDir

打包輸出在dist中的目錄氮帐，默認(rèn)值'dist'嗅虏，每次執(zhí)行時會先清除dist中已有的相同資源(構(gòu)建時傳入 --no-clean 可關(guān)閉清除功能)。
輸出目錄如：outputDir : 'dist/DEV/70000080'

image.png

3上沐、assetsDir

基于outputDir目錄下放置的靜態(tài)資源目錄皮服，會與index.html同級。與publicPath相似参咙。

image.png

4龄广、indexPath

自定義入口頁，默認(rèn)index.html

image.png

5蕴侧、filenameHashing

默認(rèn)情況下择同，生成的靜態(tài)資源在它們的文件名中包含了 hash 以便更好的控制緩存，默認(rèn)值 true净宵。
設(shè)置false敲才，生成的靜態(tài)資源文件不會帶有hash值，這樣會造成瀏覽器二次瀏覽項(xiàng)目資源文件緩存問題择葡。

image.png

6紧武、pages

配置多頁面入口

module.exports = {
    pages: {
      index: {
        entry: 'src/main.js',  // page 的入口
        template: 'public/index.html', // 模板來源
        filename: 'index.html', //  在 dist/index.html 的輸出
      },
      demo: {
        entry: 'src/pages/demo/main.js',
        template: 'public/demo.html',
        filename: 'demo.html',
      },
      demo2: {
        entry: 'src/pages/demo2/main.js',
        template: 'src/pages/demo2/demo2.html',
        filename: 'demo2.html',
      },
    }
  }

7、lintOnSave

設(shè)置是否在開發(fā)環(huán)境下每次保存代碼時都啟用 eslint刁岸，默認(rèn)值：default
可選值：
false：關(guān)閉每次保存都進(jìn)行檢測
true：開啟每次保存都進(jìn)行檢測脏里，效果與warning一樣
‘warning’：開啟每次保存都進(jìn)行檢測，lint 錯誤將顯示到控制臺命令行虹曙，而且編譯并不會失敗迫横。
‘error’：開啟每次保存都進(jìn)行檢測，lint 錯誤將顯示到瀏覽器頁面上酝碳，且編譯失敗矾踱。
‘default’：同’error’

8、runtimeCompiler & runtimeonly

main.js中 new Vue

runtimeCompiler

image.png

Vue中的模板如何最終渲染成真實(shí)DOM
template -> ast -> render -> vdom -> UI

runtimeonly

image.png

Vue中的模板如何最終渲染成真實(shí)DOM
render -> vdom -> UI

runtimeonly比runtimeCompiler性能更高疏哗，代碼量更少

那么.vue文件中的template是由誰處理的
是由vue-template-compiler

runtime-only 更快的原因：

runtime-only比runtime-compiler更快呛讲，因?yàn)樗÷粤藇ue內(nèi)部過程中的第一個過程，如果是runtime-compiler那么main.js中就會出現(xiàn)template從而需要過程一導(dǎo)致增加了一個過程，同時增加了大小而 runtime-only 模式中不是沒有寫 template 贝搁，只是把 template 放在了.vue 的文件中了并有一個叫 vue-template-compiler的在開發(fā)依賴時將.vue文件中的 template 解析成 render 函數(shù)了因?yàn)槭情_發(fā)依賴吗氏，不在最后生產(chǎn)中，所以最后生產(chǎn)出來的運(yùn)行的代碼沒有template

9雷逆、transpileDependencies

默認(rèn)情況下 babel-loader 會忽略所有 node_modules 中的文件弦讽，默認(rèn)值false。你可以啟用本選項(xiàng)膀哲，以避免構(gòu)建后的代碼中出現(xiàn)未轉(zhuǎn)譯的第三方依賴往产。

不過，對所有的依賴都進(jìn)行轉(zhuǎn)譯可能會降低構(gòu)建速度某宪。如果對構(gòu)建性能有所顧慮仿村，你可以只轉(zhuǎn)譯部分特定的依賴：給本選項(xiàng)傳一個數(shù)組，列出需要轉(zhuǎn)譯的第三方包包名或正則表達(dá)式即可兴喂。

image.png

10蔼囊、productionSourceMap

如果你不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建瞻想，默認(rèn)值true压真。
項(xiàng)目打包后，代碼都是經(jīng)過壓縮加密的蘑险，如果運(yùn)行時報錯，輸出的錯誤信息無法準(zhǔn)確得知是哪里的代碼報錯岳悟。也就是說map文件相當(dāng)于是查看源碼的一個東西佃迄。如果不需要定位問題，并且不想被看到源碼贵少，就把productionSourceMap 置為false呵俏，既可以減少包大小，也可以加密源碼滔灶。

image.png

11普碎、crossorigin

設(shè)置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標(biāo)簽的 crossorigin 屬性 CORS跨域共享。

12录平、configureWebpack

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

如果這個值是一個函數(shù)斗这，則會接收被解析的配置作為參數(shù)动猬。該函數(shù)既可以修改配置并不返回任何東西，也可以返回一個被克隆或合并過的配置版本表箭。

更多細(xì)節(jié)可查閱：配合 webpack > 簡單的配置方式 或者打印config展開了解更多屬性赁咙。

image.png

12、chainWebpack

是一個函數(shù)，會接收一個基于 webpack-chain 的 ChainableConfig 實(shí)例彼水。允許對內(nèi)部的 webpack 配置進(jìn)行更細(xì)粒度的修改崔拥。

image.png

13、devServer

vue cli暴露的一個對webpack-dev-server做配置的接口凤覆，支持所有webpack-dev-server的選項(xiàng)握童。它對應(yīng)了webpack配置選項(xiàng)中的devSever。在開發(fā)中叛赚，通常配置devServer.proxy澡绩，實(shí)現(xiàn)請求代理，避免跨域俺附。更具體的可以看webpack的devServer配置肥卡。

devServer: {
    contentBase:path.join(__dirname, "dist"), // 指定服務(wù)器資源的根目錄,一般是項(xiàng)目的根目錄。
    port:8000, // 啟動的端口號
    host:0.0.0.0, //配置 DevServer的服務(wù)器監(jiān)聽地址,host的默認(rèn)值是 127.0.0.1, 配置后訪問 http://0.0.0.0:8000/  可以訪問的到事镣，其他局域網(wǎng)的電腦也可以訪問步鉴。
    headers：{'hjm':123}, //配置HTTP響應(yīng)中注入一些HTTP響應(yīng)頭，不會注入到CDN及https資源響應(yīng)頭中璃哟。
    historyApiFallback: true, //用來配置應(yīng)對返回404頁面時定向跳轉(zhuǎn)到特定頁面的氛琢，也可以是對象方式通過rewrites配置路由正則。
    hot: true,  // 不配置此項(xiàng)也能熱更新随闪，在 webpack 5 中 HMR 已自動支持阳似。
    inline:true, //配置webpack-dev-server 兩種模式，可以實(shí)現(xiàn)自動刷新和模塊熱替換機(jī)制铐伴，inline: false 就是使用iframe模式來重載頁面撮奏。
    overlay: true, //用來在編譯出錯的時候，在瀏覽器頁面上顯示錯誤当宴。該屬性值默認(rèn)為false畜吊。
    open:true, // 啟動服務(wù)后自動打開瀏覽器
    compress:true, // 開啟gzip壓縮
    quiet: true //靜默模式,開啟后，除了初始啟動信息之外的任何內(nèi)容都不會被打印到控制臺
    proxy:{} // 跨域代理
  }