Nginx配置Vue项目,无法按路径跳转及刷新404的解决方案
更新时间：2023年06月30日 10:37:23 作者：Coder_C_1024
这篇文章主要介绍了Nginx配置Vue项目,无法按路径跳转及刷新404的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Nginx配置Vue项目,无法按路径跳转及刷新404
当前已有PHP项目（ThinkPHP 5 框架，Laravel框架同理），由于PHP项目有多个模块：admin、index、api等模块，前端代码又想和现有项目相同域名。
实现
- 在PHP项目的public目录下创建h5文件夹；
- Vue打包项目，使用history路由模式，运行的基础路径填：/h5/；
- 将打包好的Vue文件放置PHP项目下的public/h5下；
- 配置nginx伪静态，配置如下：
location /h5 {
try_files $uri $uri/h5 /h5/index.html?$query_string;
}这样能解决无法按Url路径跳转页面，以及刷新404的问题。
Nginx作为Vue项目服务器简单配置
server {
listen 80; #监听80端口
server_name localhost;
location / {
root /xxxx/xxx/xxx; #你项目在系统中的路径
index index.html index.htm;
}
}一个简单配置就玩了。
我这个项目有个特殊的地方，一个项目用了两个后台，请求的地址就不一样，我是根据前端请求uri区别使用那个后端的。
比如浏览器http://localhost/system/user/list就使用 localhost:8080后台，如果是http://localhost/business/xxxx就使用localhost:8081后台，nginx配置如下：
server {
listen 80; #监听80端口
server_name localhost;
location / {
root /xxxx/xxx/xxx; #你项目在系统中的路径
index index.html index.htm;
}
location /system {
proxy_pass http://localhost:8080;
}
location /business {
proxy_pass http://localhost:8081;
}
}重点重点重点
在配每一个跳转时(/system) proxy_pass后面地址结尾是否带斜杠"/"是不一样的.
- 情况1 proxy_pass http://localhost:8081/; 结尾有斜杠
- 我请求/business/order/list 这个时, 最终跳转的是 http://localhost:8081/order/list 不会把locahost后面匹配的字符串加到请求里
- 情况2 proxy_pass http://localhost:8081; 结尾没有斜杠
我请求/business/order/list 这个时, 最终跳转的是 http://localhost:8081/business/order/list .
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue3中watch特性进行了一些改变和优化,与computed不同,watch通常用于监听数据的变化,并执行一些副作用,这篇文章主要给大家介绍了关于VUE3数据侦听的相关资料,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue 之 .sync 修饰符的相关知识，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下2018-04-04
文章详细介绍了Vue中的Diff算法,特别是Vue2的双端Diff和Vue3的快速Diff算法,双端Diff通过四个指针从两端向中间遍历,减少DOM操作,快速Diff通过预处理,减少参与复杂对比的节点,利用最长递增子序列优化乱序匹配,两者都利用节点的key值来优化更新过程,提升性能2026-04-04
vue-cli3使用 DllPlugin 实现预编译提升构建速度
这篇文章主要介绍了vue-cli3使用 DllPlugin 实现预编译提升构建速度 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了基于vue写微信小程序mpvue-docs跳转页面，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue子组件created方法不执行问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了关于vue-color-颜色选择器插件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要给大家介绍了关于Vue中extends继承和组件复用性的相关资料,组件(Component)是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue中的数据格式化filters、formatter方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。这篇文章主要介绍了vue2.0 实现导航守卫（路由守卫）的相关知识,需要的朋友可以参考下2018-05-05
最新评论