Vue cli配置打包檔案本地預覽

於是就去找webpack.base.conf.js檔案,有個output選項,output是webpack中對輸出檔案的配置，最常用的有filename、path屬性，指定輸出檔案的名稱和在專案中的位置，publicpath可以為專案中的所有資源指定乙個基礎路徑，也是我們解決這個問題的關鍵

官方文件：webpack output

如圖：

可以看到publicpath屬性中有個三元運算，process.env.node_env又是個什麼呢？

precess物件是乙個全域性變數，可以在應用程式中全域性使用的（包括業務頁面），

process.env屬性返回乙個包含使用者環境資訊的物件，

process.env.node_env就是用來定義環境變數，一般包括production(生產環境)、development(開發環境)，我們在webpack中的各種配置也是根據環境變數來做相應處理。

既然是對生產環境的檔案做處理自然是去找config.build物件，這個時候就來到config資料夾下找相關配置了

index.js檔案中輸出兩個物件（dev、 build）, 在build物件中更改assetspublicpath為』./』或者空字串都行，這時候執行下打包命令 npm run build，在瀏覽器中開啟dist資料夾下的index.html

哈哈，檔案載入過來了，但是，css檔案中引的font檔案路徑載入不到，來看看這個時候font檔案的路徑

由於我用了相對當前資料夾的路徑，此時的url就是相對當前css檔案所在目錄的，此時dist資料夾結構如圖：

我想到的解決辦法是對font檔案的輸出做單獨處理，還是webpack.base.config.js檔案，

更改font檔案的輸出路徑，好了，npm run build

鐺啷啷，載入出來了。