vue-element-admin | 项目部署及nginx反向代理

1、下载nginx，我下载的是nginx-1.20.1,下载后解压。下载地址：nginx: download

2、本地vue-element-admin项目打包

        运行命令npm run build:prod

        项目文件夹中会有一个dist文件

        将dist文件夹放入nginx文件夹中的html文件夹，配置conf文件夹中的nginx.conf文件

        

       

说明一点，因存在跨域问题，本地vue-element-admin 加了一个代理，用于测试环境。具体配置在vue.config.js中

        

当访问的路径前有/workbenchapi时被重定向到一个固定的地址

1）request.js 文件中baseURL设置为/workbenchapi

2）若生产env.production文件配置如下，

        

则此时nginx.conf需配置如下（后端地址不含workbenchapi）：

        

 3）若生产env.production配置如下

        

则 nginx.conf配置如下，后端接口地址：http://***:8088/portal/***/***/getUser

        

完成以上配置后，

启动nginx,进入nginx文件夹，执行

启动： start nginx  

退出： .\nginx -s quit

重启：.\nginx -s  reload

 删除nginx进程： taskkill /IM nginx.exe /F

查看nginx进程: tasklist /fi "imagename eq nginx.exe"

参考vue-element-admin | 项目部署及nginx反向代理-401/404问题_Kasey_L的博客-CSDN博客​​​​​​