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

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

Nginx配置两个地方就行

先是配置好自己项目的服务，确保自己的项目能运行：

        location / {
            root    /web/xiangmu/public;  // 本地项目的路径
            index index.html index.php;
        }

再是配置接口请求后端

     location /api/ {
            proxy_pass http://192.168.1.1:8000;（后端接口地址，注意端口号）
            proxy_set_header Host $HOST;
        }

注意点（后端接口配置）

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

php think swoole:server

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

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 

proxy_pass的地址记得在hosts文件做ip映射，建议直接使用域名对应的ip地址。

location 中 ~ （区分大小写）与 ~* （不区分大小写）标识均为正则匹配。

如果你不确定，请在location后面加上 location ~* /api/ { }这样的配置（目的：不区分“api”三个字母的大小写）。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。