vue项目与后端接口部署到同一域名

Nginx配置两个地方就行:

  1. 先是配置好自己项目的服务,确保自己的项目能运行:
        location / {
            root    /web/xiangmu/public;  // 本地项目的路径
            index index.html index.php;
        }

  1. 再是配置接口请求后端:
     location /api/ {
            proxy_pass http://192.168.1.1:8000;(后端接口地址,注意端口号)
            proxy_set_header Host $HOST;
        }


注意点(后端接口配置):

后端需要单独启动一个服务(如果是TP 有swoole, 可以配置一个后端服务。详情看手册 )

php think swoole:server

如果你的配置出现404了,这个时候你可以对照检查下面的问题是不是你遇到的。

  1. proxy_pass 地址后面要不要加“/”,这个取决于匹配的 /api/ 作不作为你uri的一部分,如果 /api/ 是其中一部分,则不需要带上“/”;
    反之带上。加了“/”相当于是绝对根路径,nginx 不会把location 中匹配的路径 /api/ 带上。

    [举个列子,加了/]:

     请求地址原本是这样: http://192.168.1.1/api/a.html;
     如果配置是这样:proxy_pass http://192.168.1.1/;(后端接口地址)
     那么请求接口地址应该变成这样: http://192.168.1.1/a.html 
    
    
  2. proxy_pass的地址记得在hosts文件做ip映射,建议直接使用域名对应的ip地址。

  3. location 中 ~ (区分大小写)与 ~* (不区分大小写)标识均为正则匹配。
    如果你不确定,请在location后面加上 location ~* /api/ { }这样的配置(目的:不区分“api”三个字母的大小写)。

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值