config.js配置（js讀取配置文件config）

本文目錄一覽：

• 1、在config.js裡面如何對默認首頁進行配置
• 2、vue.config.js中的webpack配置，優化及多頁面應用開發
• 3、【webpack】–config 的使用
• 4、求解答關於Vue.config.js文件的詳細配置
• 5、通俗易懂講解vue.config.js的配置參數

在config.js裡面如何對默認首頁進行配置

XP系統可在桌面上點「開始」/「運行」，然後在對話框里輸入「SYSEDIT」就可以了。但是同時打開C:\WINDOWS\SYSTEM.INI;C:\WINDOWS\WIN.INI;C:\CONFIG.SYS和C:\AUTOEXEC.BAT共四個文件,注意你要設置的CONFIG.SYS文件為空,不知你要設置什麼內容?你的操作系統是哪個版本?

vue.config.js中的webpack配置，優化及多頁面應用開發

目錄

官方文檔

vue-cli3以下版本中，關於webpack的一些配置都在config目錄文件中，可是vue-cli3以上版本中，沒有了config目錄，那該怎麼配置webpack呢？

3.x初始化項目後沒有了build和config文件，如果你想對webpack相關內容進行配置，需要自己在根目錄下(與package.json同級)創建一個vue.config.js文件，這個文件一旦存在，那麼它會被 @vue/cli-service 自動載入。(但需要我們自己手動創建哦vue.config.js，跟package.json同級)

在配置中絕大多數都是（可選項）

常規操作還是用到了commjs語法

部署應用包的基本Url，默認/, 可以設置為相對路徑./,這樣打出來的包，可以部署到任意路徑上

輸出文件目錄（打包後生成的目錄，默認dist）

打包後生成的靜態資源目錄，默認「 」 ，也就是我們打包後的css，js等存放的位置

是否在保存的時候檢查

生產環境的 source map，可以將其設置為 false 以加速生產環境構建，默認值是true

可通過 devServer.proxy解決前後端跨域問題（反向代理）

擴展： hot 和 hotOnly 的區別是在某些模塊不支持熱更新的情況下，前者會自動刷新頁面，後者不會刷新頁面，而是在控制台輸出熱更新失敗

擴展：

Preload： 用於標記頁面載入後即將用到的資源，瀏覽器將在主體渲染前載入preload標記文件。Vue CLI 應用會為所有初始化渲染需要的文件自動生成 preload 提示；

Prefetch: 用於標記瀏覽器在頁面載入完成後，利用空閑時間預載入的內容。Vue CLI 應用默認為所有作為 async chunk 生成的 JavaScript 文件 (通過動態 import() 按需 code splitting 的產物) 自動生成prefetch提示。

webpack配置

擴展:

在這裡configureWebpack和chainWebpack的作用相同，唯一的區別就是他們修改webpack配置的方式不同：

這裡配置了全局sass 需要安裝的依賴 sass-loader less-loader

由於 sass-loader 版本不同，loaderOptions 中的 additionalData 的鍵名也不同

vue-cli3中的webpack與vue多頁面應用開發

相關參數:

封裝

很好的pwa插件相關配置

pwa介紹及使用

當運行項目並且打包的時候，會發現chunk-vendors.js這個文件非常大，那是因為webpack將所有的依賴全都壓縮到了這個文件裡面，這時我們可以將其拆分，將所有的依賴都打包成單獨的js;

上面已經提到過去掉列印的操作（console、debug）這裡詳細講解一下

新版uglifyjs-webpack-plugin需寫成以下方式

gizp壓縮是一種http請求優化方式，通過減少文件體積來提高載入速度。html、js、css文件甚至json數據都可以用它壓縮，可以減小60%以上的體積。webpack在打包時可以藉助 compression webpack plugin 實現gzip壓縮。

和我們正常創建項目相同，這裡通過vue-cli3腳手架進行創建

【webpack】–config 的使用

命令行中執行 webpack ，默認會使用 webpack.config.js 配置文件。

1.將現有的 webpack.config.js 文件名修改為 webpack.dev.config.js ；

2.運行 webpack ，如下圖所示：

求解答關於Vue.config.js文件的詳細配置

這裡是創建代理伺服器，訪問的時候會通過代理伺服器轉發，所以就不會出現跨域問題。

這裡的配置是以”/api”開頭的地址，都通過代理訪問，其他的地址則不通過代理，後面的是代理地址。

通俗易懂講解vue.config.js的配置參數

貼上 官網

vue-cli3 創建的時候並不會自動創建vue.config.js，因為這個是個可選項，所以一般都是需要修改webpack的時候才會自己創建一個vue.config.js

再然後因為vue-cli3內部高度集成了webpack，一般來說使用者不需要再去知道weboack做了什麼，所以沒有暴露webpack的配置文件，我們可以手動去創建vue.config.js 去修改默認的webpack。注意，只能叫vue.config.js。

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

參考：

默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 ，則設置 publicPath 為 /my-app/。

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

通常開發環境，本地運行都會直接部署在根路徑上，publicPath設置為’/’，訪問地址是你的IP地址。如下是設置成’/app’的效果：

從上面可以得知，靜態資源文件都是在app下的，所以在dist下新增添一個app目錄，把dist下文件放到app下，相當於一個文件的路徑，可以發現項目會正常啟動。一般nginx都會配置一個靜態資源目錄，打包後的文件都會放到這個靜態資源目錄裡面，nginx去做映射，所以publicPath這個屬性基本不用改。’/’就行。

結論： publicPath配置成’/aaa/bbb/ccc’， 則需在相應的伺服器路徑中新建aaabbbccc的文件夾，然後將打包後的文件放進去，就ok啦。

項目中，我會在.env.production文件中設置一個變數VUE_APP_BASE_URL ，項目打包後告訴相關人員 nginx 路由前綴是什麼即可

outputDir

assetsDir

indexPath

filenameHashing

直觀效果：當運行npm run build時，

打包後的文件後面都會帶一個8位的hash值，那啥是個hash值？

在打包出來的文件名上加上文件內容的hash是目前最常見的有效使用瀏覽器長緩存的方法，js文件如果有內容更新，hash就會更新，瀏覽器請求路徑變化所以更新緩存，如果js內容不變，hash不變，直接用緩存。（這段話是從別的文章裡面參考的）。

將filenameHashing這個值設置為false試試，就不會帶那個後綴hash值。

pages

lintOnSave

runtimeCompiler

transpileDependencies

productionSourceMap

crossorigin （不理解）

integrity

configureWebpack

chainWebpack

Css相關配置

devServer

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

補充知識

所謂的跨域就是不同源，不滿足協議、域名、埠都相同的約定

同源

不同源 協議不同(https)

不同源 埠不同(90)

不同源 域名不同(demo)

當協議、域名、埠中任意一個不相同時，就是不同源。若不同源之間相互請求資源，就算作跨域

補充知識

反向代理（Reverse Proxy）方式是指以代理伺服器來接受網路上的連接請求，然後將請求轉發給內部網路上的伺服器，並將伺服器上得到的結果返回給請求連接的客戶端，此時代理伺服器對外就表現為一個反向代理伺服器。客戶端無需做任何配置。

修改config/index.js /vue.config.js文件（改完之後千萬記得要重新 npm run dev）

host 將他的值修改為 0.0.0.0，代表可以訪問本機所有的IP地址，讓vue項目可通過localhost和IP同時訪問。

port 設置埠號

open 是否在第一次編譯時是自動打開瀏覽器

hot 開啟為true，啟動熱重載，自動刷新頁面

https

inline

overlay

targe 代理的伺服器，也就是api要訪問的伺服器。

changeOrigin 允許跨域， 為false時，請求頭中host仍然是瀏覽器發送過來的host;如果設置成true：發送請求頭中host會設置成target的值

ws 是否代理websocket

pathRewrite 重寫 url 的 path 部分

此文記錄下來，方便自己遺忘的時候能夠快速查閱，如有錯誤請指出。

參考鏈接：

這篇文章講的也很詳細