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，而后写入对应的文件就能够了。​

到这里这个功能基本就实现了，我也是一个初学者，有什么不对的地方你们一块儿讨论。

以为本文对你有帮助，添加公众号[自学前端之路]