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 .
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Element InputNumber计数器的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了vue使用leafLet方式(绘图工具),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue中style设置scoped后部分样式不生效的解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
在 Vue 2 中,在 v-for 里使用的 ref attribute会用ref 数组填充相应的 $refs property,本文给大家介绍Vue 3.0 v-for中的Ref数组的相关知识,感兴趣的朋友一起看看吧2023-12-12
本篇文章主要介绍了vue-resource 拦截器使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了vue ssr+koa2构建服务端渲染的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
Vue中的配置项Props能让组件接收外部传递过来的数据,本文给大家介绍了Vue props实现父组件给子组件传递数据的几种方式,文中有详细的实现方式,具有一定的参考价值,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue实现点击按钮“查看详情”弹窗展示详情列表操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
在使用el-table的时候经常会涉及到表格的列合并，包括表格操作列的合并,下面这篇文章主要给大家介绍了关于el-table表格动态合并行及合并行列的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue如何从后台下载.zip压缩包文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论