跟著Vue-cli來'學'並'改'Webpack之多環境配置和釋出

gold_gold發表於2017-12-22

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，帶來的好處非常多，比如確保構建的是一份程式碼，避免多環境構建導致不一致的可能性構建一般是個高開銷的行為，可能會引起執行伺服器的不穩定可以快速回滾或回覆，相同版本的程式碼無需重構構建。。。