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

男娘i 2023-01-04 14:37 2222阅读 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][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模式，

"h5" : {
            "title" : "xxx",
            "domain" : "zlz.xxx.com",
            "router" : {
                "mode" : "history"
    
            }
          
        }

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

Uncaught SyntaxError: Unexpected token '<'

![20210110184357223.png][]

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

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

"h5" : {
            "title" : "test",
            "router" : {
                "mode" : "history",
                "base" : "./"
            }
    
        }

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

"h5" : {
            "title" : "test",
            "router" : {
                "mode" : "history",
                "base" : "/niubi"
            }
    
        }

这样访问时就是自动在路径前都加上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][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

<IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /
      RewriteRule ^index\.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /index.html [L]
    </IfModule>

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

[\#][Link 1]nginx

location / {
      try_files $uri $uri/ /index.html;
    }

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

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

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

[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]: 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
[20210110184357223.png]: /images/20221119/71eb1883754e4ba29a1bb9f79499f2b5.png
[FallbackResource]: https://httpd.apache.org/docs/2.2/mod/mod_dir.html#fallbackresource
[Link 1]: https://router.vuejs.org/zh/guide/essentials/history-mode.html#nginx