跟着Vue-cli來'學'並'改'Webpack之多環境配置和發佈

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

Vue-cli生成模版文件目錄

├── README.md
├── build
│  ├── build.js
│  ├── check-versions.js
│  ├── logo.png
│  ├── 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，帶來的好處很是多，好比確保構建的是一份代碼，避免多環境構建致使不一致的可能性構建通常是個高開銷的行爲，可能會引發運行服務器的不穩定能夠快速回滾或回覆，相同版本的代碼無需重構構建。。。

講了這麼多因此，打包構建並非一個簡單的事情，因此須要自動化工具來配置

手動修改vue-lic的webpack的配置，結合 fjpublish 進行多環境打包發佈

主要操做是把須要配置的環境變量配置到./config目錄下對應的文件裏面

而後啓動不一樣的環境進行，讀取不一樣的數據。小型項目可使用此構建方法，很是好用且方便。

具體的配置過程在個人另一篇文章中有介紹

傳送門：Vue.js+Element-UI從0到部署:基礎篇（3.前端自動化、多環境配置到發佈）

Docker 容器技術

上面大公司的構建流程很複雜，基於 Docker 能夠進行容器配置，本人也不太熟悉，又熟悉的朋友，能夠發上連接學習學習，這裏附上一篇相關軟文：基於 Docker 打造前端持續集成開發環境

下一節將繼續跟着跟着Vue-cli來'學'並'改'Webpack之 打包優化