3分钟本地部署前端项目

前期环境准备

nginx的安装

1. 在nginx官网nginx官网下载windows版本的nginx压缩包。
   
2. 下载完成后解压。解压后的目录如下：
   
3. 安装serve插件。

npm install -g serve

4. 完事后查看serve版本号，证明安装成功。
   

serve插件的安装

前端项目打包

在项目中使用npm run build将项目打包成dist文件。

部署过程

1. 在打包后的dist文件目录中执行serve。可以将纯前端项目部署到本地。
   
2. 配置nginx。打开该目录下的nginx.conf文件，修改文件内容。这一步需要配置两个代理：一是纯前端项目的代理，二是前端项目中配置后端的代理。
   比如我这里纯前端项目部署后的地址是http://192.168.86.57:3000，前端项目中的代理配置是/prod-api代理http://172.22.0.13:8080。我这里需要在nginx.conf文件里面配置这两项：