如何解決通過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后的文件

2. 構建服務器會從git服務器中拉去要發布的代碼版本在這里完成安裝依賴，如題主的vue。并構建用于部署的文件，這些文件一般也會被壓縮成一個壓縮包用于管理

3. 構建后的發布包會被上傳到中轉站：文件管理服務器集群

4. 實際運行的服務器一般不會是單臺，而是集群，這n臺服務器會從文件服務器中拉去對應版本的相同壓縮包，并解壓最終運行

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

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

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

關于“如何解決通過vue-cli來學習修改Webpack多環境配置和發布問題”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。