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 .

总结

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

您可能感兴趣的文章:

vue多页面项目中路由使用history模式的方法
这篇文章主要介绍了vue多页面项目中路由如何使用history模式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
vue-cli如何修改打包项目结构及前缀
这篇文章主要介绍了vue-cli如何修改打包项目结构及前缀问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
Vue3项目实现前端导出Excel的示例代码
这篇文章主要介绍了Vue3项目实现前端导出Excel的示例,在vue3的项目中导出Excel表格的功能,可以借助xlsx库来实现,下面是详细的操作步骤,需要的朋友可以参考下
2025-01-01
使用vue-cli创建项目的图文教程(新手入门篇)
这篇文章主要介绍了新手入门vue 使用vue-cli创建项目的图文教程，本文是针对完全不了解过vue和npm的小白而写的,需要的朋友可以参考下
2018-05-05
Vue中使用axios调用后端接口的坑及解决
这篇文章主要介绍了Vue中使用axios调用后端接口的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
vue vant Area组件使用详解
这篇文章主要介绍了vue vant Area组件使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
vue实现父子组件双向绑定的方法总结
Vue.js 是一种流行的 JavaScript 框架,它提供了一种简单且高效的方式来构建用户界面,在 Vue 中,父子组件之间的双向绑定是一种常见的需求,下面我们就来学习一下vue中父子组件双向绑定的常用方法吧
2023-10-10
项目中一键添加husky实现详解
这篇文章主要为大家介绍了项目中一键添加husky实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）
这篇文章主要给大家介绍了关于Vue组件间通信的相关资料，其中包括父子组件、兄弟组件及祖先后代组件间的通信，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04
vue基于elementUI表格状态判断展示方式
这篇文章主要介绍了vue基于elementUI表格状态判断展示方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10