vue-cli操作Webpack環境配置

這次帶給大家vue-cli操作Webpack環境配置，vue-cli操作Webpack環境配置的注意事項有哪些，以下就是實戰案例，一起來看一下。

Vue之所以現在如此之火熱，一部分也得益於有官方的腳手架生成工具Vue-cli,大大簡化了初學者環境搭建的成本，但是實際業務中我們往往需要實現其他的功能來對webpack進行改造，本文將根據一些實際的業務需求，先學習vue-cli產生的模版，然後在進行相關修改。

Vue-cli產生模版檔案目錄

├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── Hello.vue
│ └── main.js
└── static

本文主要關注的點在

build - 編譯任務的程式碼

# config - webpack 的設定檔

package.json - 專案的基本資訊

具體每一行webpack的配置的意義這裡就不詳細介紹了，請參考 vue2.0腳手架的webpack 設定檔分析

常見需求一：多環境配置與發布

Vue-cli產生的模版，只配置了npm run dev , npm run build 這行腳本，分別去啟動開發環境服務和，執行打包。 而往往正常的公司開發流程最少都會有開發、測試模擬、生產環境，而每個環境響應的伺服器請求地址，或者一些配置參數都會不同，並且發布的時候需要發佈到多台伺服器上，所以需要執行自動化腳本來進行。建置和發布。

我們首先得弄清楚這個問題，轉載一段文章，作者：鄭海波，鏈接，來源：知乎

這個其實和vue 無關，是一個通用問題：即程式碼在哪裡建置。如果題主的伺服器指的是運行伺服器，那其實兩種都不是好選擇。很多新人包括我工作前都以為部署程式碼是這樣的

但實際上在較大的網路公司會很麻煩。以下介紹都是常見做法，並簡化了一些流程，只是為了方便新人理解。程式碼提交到git或svn伺服器注意這裡是源文件，不是build後的文件

構建伺服器會從git伺服器中拉去要發布的程式碼版本在這裡完成安裝依賴，如題主的vue。並且建構用於部署的文件，這些文件一般也會被壓縮成一個壓縮包用於管理

建置後的發布包會被上傳到中轉站：文件管理伺服器集群

#實際運行的伺服器一般不會是單一台，是集群，這n台伺服器會從檔案伺服器中拉去對應版本的相同壓縮包，並解壓縮最終運行

實際上，這裡有明顯的前後順序的流程在裡面，如果都是手動操作的話會非常麻煩，所以一般大公司裡都會有一個自動部署平台來全局統籌完成這些工作，作為開發者其實只需要點下『一鍵部署』就完成以上內容了

#

如在配合gitlab、github這類提供的webhook自動通知自動部署平台，穩定版的程式碼已經完成推播了（Push Event）。那我們就連點一下按鈕都不需要了。這是一個典型的建置部署分離的Case，帶來的好處非常多，例如確保建置的是一份程式碼，避免多環境建置導致不一致的可能性建置一般是個高開銷的行為，可能會引起運行伺服器的不穩定性可以快速回滾或回复，相同版本的程式碼無需重構建置。 。 。

講了這麼多所以，打包構建並不是一個簡單的事情，所以需要自動化工具來配置，已有的成熟的方案就是docker 構建一個應用容器引擎來構建，發布等。不過這塊我也不熟悉，有會的同學可以進行分享。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue-cli webpack怎樣搭建vue開發環境

原生JS如何對多個捲軸同步操作

#

以上是vue-cli操作Webpack環境配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！