脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Nginx配置Vue项目,无法按路径跳转及刷新404

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 .

总结

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

您可能感兴趣的文章:

相关文章

最新评论