uniapp打包H5空白页面或者刷新404问题

男娘i 2023-01-04 14:37 2287阅读 0赞

uniapp的路由跟vue一样，有hash模式和history模式，

使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

官方文档：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

如果用hash的话，url后面会有#号，这样不美观也不好获取参数，比如我微信公众号登录需要跳转就会受到#影响，那就得用history模式，

  1. "h5" : {
  2.         "title" : "xxx",
  3.         "domain" : "zlz.xxx.com",
  4.         "router" : {
  5.             "mode" : "history"
  7.         }
  9.     }

但这样打出包来可能会出现空白页面，然后报这个错：

Uncaught SyntaxError: Unexpected token ‘<’

20210110184357223.png

这就是因为开发时默认是没有项目名的，都是相对于根目录，如果你部署的环境是有路径的，就需要配置base路径，否则找不到静态资源

有的人说改成‘./’，但我改了以后url又出现#号了。

  1. "h5" : {
  2.         "title" : "test",
  3.         "router" : {
  4.             "mode" : "history",
  5.             "base" : "./"
  6.         }
  8.     }

所以还是谨慎使用./，而是改成你的项目实际地址，如果你的项目地址为 xxx.com/niubi/,或者xxx.com/niubi/pages/user/user,相当于在根目录前多了个niubi，那就把base改成你的实际目录就行了

  1. "h5" : {
  2.         "title" : "test",
  3.         "router" : {
  4.             "mode" : "history",
  5.             "base" : "/niubi"
  6.         }
  8.     }

这样访问时就是自动在路径前都加上niubi 了，而且不会出现#

刷新404问题

我是微信登录需要跳转到本页面，但每次一跳就成了404了，你会发现开发时刷新没事，但是打包后一刷新就404

这是路由特性决定的，还是在这个文档里说的很清楚

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

想用history又想刷新直接跳到对应页面，就需要后台服务器配置做配合

Apache

  1. <IfModule mod_rewrite.c>
  2.   RewriteEngine On
  3.   RewriteBase /
  4.   RewriteRule ^index\.html$ - [L]
  5.   RewriteCond %{REQUEST_FILENAME} !-f
  6.   RewriteCond %{REQUEST_FILENAME} !-d
  7.   RewriteRule . /index.html [L]
  8. </IfModule>

除了 mod_rewrite，你也可以使用 FallbackResource。

#nginx

  1. location / {
  2.   try_files $uri $uri/ /index.html;
  3. }

我用的nginx，在配置文件中加入这段话就解决了，当然，如果有路径，还是需要加上路径

  1. location /niubi {
  2.   try_files $uri $uri/ /niubi/index.html;
  3. }

这样用了服务器的伪静态，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

发表评论

表情：
评论列表 （有 0 条评论，2287人围观）

还没有评论，来说两句吧...

相关阅读