uniapp打包H5空白页面或者刷新404问题 男娘i 2023-01-04 14:37 2152阅读 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
还没有评论,来说两句吧...