记录一次vue-cli工程打包部署过程

1、打包，执行package.json文件中build对应命令：npm run build:prod

 2、下载nginx,将前端部署到nginx中（我使用的是windows环境）

1）、http://nginx.org/en/download.html 下载nginx文件到本地

 2）安装部署：

a、下载完成后，解压，运行cmd,不要直接就双击nginx.exe

b、cd到解压之后的目录（到直接能看到docs,conf等的目录）

c、启动：start nginx

d、默认端口号是80，访问localhost:80看是否能访问到nginx的首页，能访问到，启动成功，没有则启动失败

访问失败：查看logs文件夹下error.log文件；常见错误：端口号被占用，nginx文件夹路径含中文

3、部署前端项目到nginx中

1）打开conf/nginx.conf文件，修改root 为前端项目打包后的目录，保存

2） 修改完成后，使用下面命令校验配置文件是否正确 test is successful就表明正确了

nginx -t -c conf/nginx.conf

3）nginx -s reload 重新启动nginx文件，访问localhost:8800就可以看到前端项目了

4）若需要代理到后台接口，增加location配置，nginx -s reload重新启动，访问

 4、至此，部署完成

5、关闭nginx命令

nginx -s quit

 

本文地址：https://blog.csdn.net/cxy_12345/article/details/108867236