uniapp发布了h5版本，部署到服务器刷新页面出现404怎么解决呀？

分类：uni-app

uniapp

您好呀，本地环境是可以的，但是部署到服务器，只要刷新页面就出现404找不到页面的情况，请问如何解决呀？已配置了vue-router的规则，看到贵公司的官方文档说不支持vue-router请问服务器还需要配置啥呀？

2018-12-24 10:33 负责人:无分享

12 个回复

5***@qq.com

修改Nginx配置
location / {
try_files $uri $uri/ /index.html last;
index index.html;
}

Trust - 少说废话

网站地址发下，方便测试一下。

2***@qq.com (作者)

http://www.jxsoufun.com/aifangtong/pages/news/index/index

2018-12-24 11:00
Trust

回复 2***@qq.com:这是使用 uni-app 开发的 H5 版的部署地址？

2018-12-24 11:08
2***@qq.com (作者)

是的，本地刷新可以正常访问哦

2018-12-24 11:09
Trust

回复 2***@qq.com:manifest.json 里面的 h5 节点配置长啥样？本地刷新啥意思，用 HBuilderX 预览？

2018-12-24 11:11
2***@qq.com (作者)

就是正常点击路由可以正常访问，然后刷新一下当前页面就出现404找不到了

2018-12-24 11:17
2***@qq.com (作者)

"h5": {

"title": "爱房通", //页面标题，默认使用 manifest.json 的 name

"template": "index.html", //index.html模板路径，相对于应用根目录，可定制生成的 html 代码

"router": {

"mode": "history", //路由跳转模式，支持 hash|history ,默认 hash

"base": "/aifangtong/" //应用基础路径，例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"

}

},

2018-12-24 11:18
2***@qq.com (作者)

这是H5配置

2018-12-24 11:18
2***@qq.com (作者)

您可以通过 http://www.jxsoufun.com/aifangtong/ 打开、然后点击右上角搜索，打开之后刷新就打不开了

2018-12-24 11:22
Trust

回复 2***@qq.com:暂时换成 hash 模式试试呢，我用 hello uni-app 测试没问题。。。https://uniapp.dcloud.io/h5/pages/component/view/view

2018-12-24 11:22
Trust

回复 2***@qq.com:你可以搜下 vue history 模式刷新加载 404 之类的问题，这个和 vue-cli 打包出来的是类似的。百度一下吧。

2018-12-24 11:22
2***@qq.com (作者)

好的我重新编译一下然后再试试

2018-12-24 11:23
2***@qq.com (作者)

hash模式，可以，干得漂亮兄弟！！！3Q

2018-12-24 11:25
1***@qq.com

回复 2***@qq.com: 我也遇见了这个问题。但是hash模式域名后面带#,

2019-06-22 16:29
b***@gmail.com

回复 2***@qq.com: 我设置了router mode=hash，一点用都么有

2020-05-06 13:05
3***@qq.com

回复 1***@qq.com: 你好，解决了吗？我也是换成hash后就带#，然后微信获取code就不能成功了

2020-05-11 13:23
3***@qq.com

回复 2***@qq.com: 你好，兄弟，你换成hash后请求微信code怎么弄得，我换成hash后url上就带#，然后微信获取code就不能成功了

2020-05-11 13:24

爱吃鱼的靖哥哥 - 行走在全栈路上的码农

这个问题怎么解决的啊，我也遇到了，换成hash模式页面后面的参数又获取不到了，郁闷

joelewis

mark下

爱吃鱼的靖哥哥

我是用的java后台，做了个过滤器，对页面进行了重定向

2019-08-26 08:58

hhyang - 如有问题，请添加QQ1606726660 备注付费咨询

history 模式服务端重定向到index.html即可

爱吃鱼的靖哥哥

是的，需要后台配合

2019-08-26 12:38

cassieHuang

我也是做后台的，后台怎么配合，springboot项目

爱吃鱼的靖哥哥

你设置个过滤器拦截请求的页面啊，不存在的页面就重定向

2019-08-28 12:31
cassieHuang

回复爱吃鱼的靖哥哥: 加载到页面，但是页面的js和css都是404是什么问题

2019-08-28 14:33
爱吃鱼的靖哥哥

回复 cassieHuang: 不知道，我没遇到这样的情况

2019-08-28 15:06

wowabc

我们这也遇到同样的问题。请问后端应该怎么配置？

后端配置反向代理后，的确不报404了，但是找不到资源就重置到首页了，一直找不到资源。

3***@qq.com

你好，解决了吗？我也是换成hash后就带#，然后微信获取code就不能成功了

2020-05-11 13:24

l***@ytcnn.com

location.href="../h5/#/pagesuser/login/login?code="+GetQueryString('code')+"&state=STATE";

1***@qq.com

看了一下官方的例子：https://hellouniapp.dcloud.net.cn/pages/component/button/button
刷新之后是可以的。看了一下network，实际上是刷新之后重新了指定了404界面，指定的404界面又是index界面，所以官方的这个解决方案也是不太合适的。
而且即使是使用了这种方式，在我的使用场景下也是有问题的，因为我第一次界面的时候链接是带token 的，之后token会被存储在内存里。然后用户可能通过各种操作，跳转到了别的界面，而这个时候，这些别的界面已经不带这个token了。
刷新之后按照官方的做法，重新加载了h5，但是这个时候token已经丢失了。