快捷導(dǎo)航

通過(guò)vue-cli來(lái)學(xué)習(xí)修改Webpack多環(huán)境配置和發(fā)布問(wèn)題

更新時(shí)間：2017年12月22日 15:02:55 作者：huangjincq

這篇文章主要介紹了隨著Vue-cli來(lái)'學(xué)'并'改'Webpack之多環(huán)境配置和發(fā)布的相關(guān)知識(shí),本文將會(huì)根據(jù)一些實(shí)際的業(yè)務(wù)需求，先學(xué)習(xí)vue-cli生成的模版，然后在進(jìn)行相關(guān)修改，感興趣的朋友一起跟著小編學(xué)習(xí)吧

Vue之所以現(xiàn)在如此之火熱，一部分也得益于有官方的腳手架生成工具Vue-cli,大大簡(jiǎn)化了初學(xué)者環(huán)境搭建的成本，但是實(shí)際業(yè)務(wù)中我們往往需要實(shí)現(xiàn)其他的功能來(lái)對(duì)webpack進(jìn)行改造，本文將會(huì)根據(jù)一些實(shí)際的業(yè)務(wù)需求，先學(xué)習(xí)vue-cli生成的模版，然后在進(jìn)行相關(guān)修改。

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

本文主要關(guān)注的點(diǎn)在

build - 編譯任務(wù)的代碼

config - webpack 的配置文件

package.json - 項(xiàng)目的基本信息

具體每一行webpack的配置的含義這里就不詳細(xì)介紹了，請(qǐng)參考 vue2.0腳手架的webpack 配置文件分析

常見(jiàn)需求一：多環(huán)境配置和發(fā)布

Vue-cli生成的模版，只配置了npm run dev , npm run build 這行腳本，分別去啟動(dòng)開(kāi)發(fā)環(huán)境服務(wù)和，執(zhí)行打包。而往往正常的公司開(kāi)發(fā)流程最少都會(huì)有開(kāi)發(fā)、測(cè)試仿真、生產(chǎn)環(huán)境，而每個(gè)環(huán)境響應(yīng)的服務(wù)器請(qǐng)求地址，或者一些配置參數(shù)都會(huì)不同，并且發(fā)布的時(shí)候需要發(fā)布到多臺(tái)服務(wù)器上，所以需要執(zhí)行自動(dòng)化腳本來(lái)進(jìn)行。構(gòu)建和發(fā)布。

我們首先得弄清楚這個(gè)問(wèn)題，轉(zhuǎn)載一段文章，作者：鄭海波，鏈接，來(lái)源：知乎

這個(gè)其實(shí)和vue 無(wú)關(guān)，是一個(gè)通用問(wèn)題：即代碼在哪里構(gòu)建。如果題主的服務(wù)器指的是運(yùn)行服務(wù)器，那其實(shí)兩種都不是好選擇。很多新人包括我工作前都以為部署代碼是這樣的

但實(shí)際上在較大的互聯(lián)網(wǎng)公司會(huì)麻煩一些。以下介紹都是常見(jiàn)做法，并簡(jiǎn)化了一些流程，僅僅只是為了方便新人理解。代碼提交到git或svn服務(wù)器注意這里是源文件，不是build后的文件

2. 構(gòu)建服務(wù)器會(huì)從git服務(wù)器中拉去要發(fā)布的代碼版本在這里完成安裝依賴(lài)，如題主的vue。并構(gòu)建用于部署的文件，這些文件一般也會(huì)被壓縮成一個(gè)壓縮包用于管理

3. 構(gòu)建后的發(fā)布包會(huì)被上傳到中轉(zhuǎn)站：文件管理服務(wù)器集群

4. 實(shí)際運(yùn)行的服務(wù)器一般不會(huì)是單臺(tái)，而是集群，這n臺(tái)服務(wù)器會(huì)從文件服務(wù)器中拉去對(duì)應(yīng)版本的相同壓縮包，并解壓最終運(yùn)行

實(shí)際上，這里有明顯的前后順序的流程在里面，如果都是手動(dòng)操作的話(huà)會(huì)非常麻煩，所以一般大公司里都會(huì)有一個(gè)自動(dòng)部署平臺(tái)來(lái)全局統(tǒng)籌完成這些工作，作為開(kāi)發(fā)者其實(shí)只需要點(diǎn)下『一鍵部署』就完成以上內(nèi)容了

如在配合gitlab、github這類(lèi)提供的webhook自動(dòng)通知自動(dòng)部署平臺(tái)，穩(wěn)定版本的代碼已經(jīng)完成推送了（Push Event）。那我們就連點(diǎn)一下按鈕都不需要了。這是個(gè)典型的構(gòu)建部署分離的Case，帶來(lái)的好處非常多，比如確保構(gòu)建的是一份代碼，避免多環(huán)境構(gòu)建導(dǎo)致不一致的可能性構(gòu)建一般是個(gè)高開(kāi)銷(xiāo)的行為，可能會(huì)引起運(yùn)行服務(wù)器的不穩(wěn)定可以快速回滾或回復(fù)，相同版本的代碼無(wú)需重構(gòu)構(gòu)建。。。

講了這么多所以，打包構(gòu)建并不是一個(gè)簡(jiǎn)單的事情，所以需要自動(dòng)化工具來(lái)配置，已有的成熟的方案就是docker 構(gòu)建一個(gè)應(yīng)用容器引擎來(lái)構(gòu)建，發(fā)布等。不過(guò)這塊我也不熟悉，有會(huì)的同學(xué)可以進(jìn)行分享。

總結(jié)

以上所述是小編給大家介紹的Webpack多環(huán)境配置和發(fā)布問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家的支持！

您可能感興趣的文章: