vue-cli 配置服务端口反向代理

Posted 2023-04-19

参考技术A 第一次部署配置，关于部署vue项目dist包，在nginx配置遇到的坑：

1.vue项目中vue.config.js的配置：

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

2.打包后dist包部署到linux服务器上，Nginx配置反向代理实现ajax进行跨域访问：

conf目录下nginx.conf配置如下：

配置之后重启nginx即可 ./nginx -s reload

注意：开始漏了rewrite ^/prod-api/(.*) 1 break; 请求后台接口一直404 not found,

Nginx配置——单域名反向代理多个端口

参考技术A 安装Nginx相对来说是非常简单的，运行下面两条命令即可。

安装成功后，设置开机启动。

启动nginx，访问80端口，发现已经启动成功了。

接下来，我们进入nginx目录下，找到nginx.conf文件开始配置；这里我把nginx.conf文件中的server配置统统删除了，以后我们再配置新的server，只需要再conf.d文件夹中创建新的*.conf即可。

配置如下：

接下来，我们需要配置一个server用于端口服务的反向代理，进入 conf.d 文件夹新建一个main.conf。

配置main.conf如下：

接下来，我们通过 http://jotyy.top/api/ 就可以访问到接口啦。