vue项目与后端接口如何部署到同一域名
更新时间：2025年06月21日 10:50:10 作者：新佳
这篇文章主要介绍了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”三个字母的大小写）。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Nuxt.js SSR与权限验证的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要介绍了elementPuls 表格反选实现示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
这篇文章主要介绍了vue项目中使用pinyin转换插件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
keep-alive是Vue中的一个内置组件,用于缓存非活动组件实例,避免重复渲染,优化性能,本文给大家介绍vue中的keep-alive用法指南,感兴趣的朋友一起看看吧2024-10-10
本篇文章主要介绍了vuex 闲置状态重置方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,下面这篇文章主要给大家介绍了关于Vue3中ref与reactive的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了vue element-ui读取pdf文件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
关于角色与权限控制,通常是分为两大类,一种是菜单权限,一种是操作权限,本文将深入探讨如何通过 Vue 实现角色权限控制,特别是基于按钮级别的权限控制,需要的可以了解下2025-02-02
这篇文章主要介绍了vue结合echarts绘制一个支持切换的折线图实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要给大家介绍了关于如何一步步基于element-ui封装查询组件的相关资料,本文通过示例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
最新评论