在前端开发过程中，开发项目编码是必须的能力，但是开发之后的上线也是不可缺少的技能。而且现在的前端开发用的打包都是借助于三方插件来完成的，本篇博文就来分享一下前端项目打包的流程步骤，本案例以Vue来介绍，其他前端技术的打包步骤这里不再过多介绍。
Vue项目打包一般是基于webpack+vue-cli下的操作，具体的操作命令也很简单，只需要在终端里面输入打包命令：npm run build 回车即可进行打包。但是需要注意一点，那就是需要完整的vue-cli项目，通过vue init webpack初始化的项目才行，不然没有打包文件，无法打包。（通过vue init webpack-simple初始化的项目没有打包文件，是不能打包的）。
具体的打包步骤如下所示：
1、打开Vue项目工程，然后在vue.config.js文件里面，修改一下项目版本；
2、在项目底部终端里面输入打包命令：npm run build 回车，即可进行打包；
3、经过短暂的等待，如果项目没有什么报错，就直接提示打包完成；
4、打包成功之后，会在项目工程目录里面生成了一个“dist”文件目录，然后单击打开，即可看到dist目录下的文件；
5、然后鼠标右键选中dist文件，然后找到文件位置进入，压缩打包dist文件，上传到服务器，即可。
附录：Vue项目打包后的dist文件里面的目录详情，如下所示：
css文件夹下的.css文件是项目要用到的css文件，在做webpack打包时，会把所有的css样式打包到该文件里面。
js文件夹下的.js.map是一个Source map文件，Source map就是一个信息文件，里面储存着位置信息。转换后的代码的每一个位置，所对应的转换前的位置。方便开发时调试js代码使用。
manifest.json文件可以理解为webpack打包生成的一个配置文件，一般不需理会。
index.html是前端代码入口的一个html文件。
以上就是本章全部内容，欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！
三掌柜的微信公众号：
三掌柜的新浪微博：
