VUE前端打包部署 vue前端打包部署到nginx

1.前端工程打包

我们直接通过VS Code的NPM脚本中提供的build按钮来完整，如下图所示，直接点击即可：

后会在工程目录下生成一个dist目录，用于存放需要发布的前端资源，如下图所示：

2.部署前端工程

将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下，如下图所示：

然后我们通过双击nginx下得nginx.exe文件来启动nginx，如下图所示：

nginx服务器的端口号是80，所以启动成功之后，我们浏览器直接访问http://localhost:80 即可，其中80端口可以省略

果80端口被占用，我们需要通过conf/nginx.conf配置文件来修改端口号。如下图所示：