1. 前端工程打包
我们直接通过WebStorm的NPM脚本中提供的build按钮来完整，如下图所示，直接点击即可：
然后会在工程目录下生成一个dist目录，用于存放需要发布的前端资源，如下图所示：
2. 部署前端工程
2.1 nginx介绍
nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
niginx在windows中的安装是比较方便的，直接解压即可。
官网:nginx.org/
安装可以参考以下链接: blog.csdn.net/weixin_4425…
conf：存在Nginx配置文件的目录
docs：存放Nginx文档的目录
html：存放静态html文件的目录
logs：存放Nginx日志的目录
temp：存放临时文件的目录
很明显，我们如果要发布，直接将资源放入到html目录中。
注意:nginx的安装目录不能有中文,否则会出现启动错误!!!
2.2 部署
将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下，如下图所示：
到此，我们的前端工程发布成功。
PS: 如果80端口被占用，我们需要通过conf/nginx.conf配置文件来修改端口号。如下图所示：
