服务器上 vue项目 nginx部署并实现 API 接口代理
vue-cli 搭建的项目我们在本地是可以设置代理的,比如/api 路径开头的请求都会代理到本地的3001 端口,并且代理以后路径上还会加上 /api 接口前缀。ProxyTable: {'/api': {target: 'http://127.0.0.1:3001',changeOrigin: true,pathRewrite...
·
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不然不会生效
本人亲测可用!
更多推荐
已为社区贡献8条内容
所有评论(0)