vue項目經過webpack插件打包後自動部署到服務器

咱們在實際開發中常常會遇到版本不停迭代，而後咱們須要把webpack打包好的文件上傳出到服務器，這個是比較麻煩的，今天我給你們分享一個在vue項目中經過運行npm run build 生成打包好的文件後直接上傳服務器，不要咱們每次都手動拷貝。

這個方案的思路是咱們本身寫一個的webpack的插件，在打包完成的時候把生成的文件名和數據經過post請求上傳服務器，服務器獲取到數據和文件名，從新生成文件到網站的目錄下，我這邊用node搭建的一個資源服務器.

(1)寫咱們的webpack插件

​在UplodeFileWebpackPlugin類中定義apply函數，在函數內部咱們註冊emit事件，這個事件是生成資源到 output 目錄以前調用，在回調函數中咱們能夠獲取到文件名和文件裏面的內容，而後調用upload函數上傳文件，須要注意的是在函數後面必定要調用callback，否則webpack不知道你什麼執行完成就會卡在哪裏.

(2)在vue.config.js中配置咱們的webpack插件

在vue.config.js中有一個configureWebpack選項能夠是一個對象或者是一個函數，在函數中咱們判斷在生產環境觸發這個插件。

(3)使用nodejs搭建一個服務

在搭建服服務器的時候咱們須要在啓動的時候加下面的代碼，由於我在上傳的時候碰見了http大小限制的問題

app.use(bodyParser.json({limit: '10mb'}));

app.use(bodyParser.urlencoded({limit: '10mb', extended: true}));

在unploadFile中咱們首先先肯定咱們的網頁保存的路徑，而後本身從新定位一個dist路徑，我是保存在當前目錄下了，而後在建立須要用到的目錄(dist,img,css,js),圖片的是不一樣的咱們須要解析裏面的buffer，若是是圖片文件content是一個對象，裏面有type,data兩個字段，data是數組全部須要解析裏面的buffer，而後寫入對應的文件就能夠了。​

到這裏這個功能基本就實現了，我也是一個初學者，有什麼不對的地方你們一塊兒討論。

以爲本文對你有幫助，添加公衆號[自學前端之路]