Windows使用Nginx部署Vue项目

1.打包Vue项目

在vue.config.js文件配置outputDir，为打包项目的文件夹名，自己命名

参考vue项目下的package.json文件里scripts配置的prod命令，执行打包命令

npm run build:prod

打包完成后的文件夹内文件如下图所示

2.下载nginx压缩包

nginx官网下载 选择稳定版，如下图所示

下载完成解压nginx-1.24.0.zip 如下图所示

直接点击nginx.exe启动nginx，然后访问localhost出现下面提示，说明启动成功

nginx常用命令

//启动nginx
start nginx

//停止nginx
nginx.exe -s stop

//重启nginx
nginx.exe -s reload

//强制关闭所有nginx
taskkill /IM  nginx.exe  /F

//查看nginx版本
nginx -v

3.部署vue到nginx

把打包vue生成的admin-vue文件夹复制到nginx的html目录下


进入conf目录，如下图所示，进入nginx的config文件夹


打开nginx.conf文件，找到server，将location里的路径修改成我们vue项目的访问路径

配置完成后，重启nginx

nginx.exe -s reload 

访问localhost或127.0.0.1 测试访问成功
如果以上都配置了，访问出现404，还需要在location下添加以下配置

try_files $uri $uri/ /index.html;

location的完整内容如下

配置后重启nginx，这次访问就成功了，刷新也没问题了

nginx.exe -s reload 

上面配置后发现后端接口访问不了，还需要进行后端接口配置，在location配置的下面添加后端接口配置
prod-api是访问后端的api前缀

location /prod-api/ {         # 配置后台数据的接口
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://localhost:8080/; #实际的后端接口的服务器地址
}

关于配置的内容代表什么意思，参考 nginx 反向代理参数介绍
nginx 完整配置如下

配置完成后，记得重启nginx，再次访问vue项目即可成功

nginx.exe -s reload 

至此，nginx部署vue项目配置完成。