服务器上 vue项目 nginx部署并实现 API 接口代理

vue-cli 搭建的项目我们在本地是可以设置代理的，比如 /api 路径开头的请求都会代理到本地的3001 端口,并且代理以后路径上还会加上 /api 接口前缀。

ProxyTable: {
    '/api': {
        target: 'http://127.0.0.1:3001',
        changeOrigin: true,
        pathRewrite: {
            '^/api': '/api'
        }
    }
}

但是这只是本地服务器的代理，等项目build 打包以后上传到服务器以后， /api 路径开口的请求就没有代理工具了。
所以这时候就用到了nginx 。
我的后台项目是node + koa2 写的，也部署在了同一台服务器上，开启的是3001 端口。
我们需要在服务器上安装nginx 安装教程这里不多赘述。不会的小伙伴可以看这篇博客https://blog.csdn.net/shi851051279/article/details/95379232
找到nginx/conf/nginx.conf文件
nginx 配置如下

    server {
		listen       	80;  					#监听服务器80端口
		server_name	www.xxxx.com;  # 服务名字可以写自己的域名或者ip
		location / {
		 	root  	/home/www/blog/admin/dist;    # 项目文件存放目录
			index  	index.html index.htm;  #首页文件，也可以自定义文件
		}
		location ^~ /api/ {   #这里是用正则匹配的以api 开头的路径 通过 proxy_pass 属性代理到服务器上node项目运行地址
		   	proxy_pass http://127.0.0.1:3001;  #因为我node项目和前端项目是部署在同一台服务器上的，所以地址用的是127.0.0.1，如果是不同服务器可自行配置服务器端项目地址
		}
	}

修改好以后保存文件重新启动nginx不然不会生效
本人亲测可用！