uni-app SSR使用History模式页面空白问题

uni-app SSR使用History模式页面空白问题

操作步骤：

  • 重复下载示例并发布，均是如此。

预期结果：

  • 使用云函数uni-ssr绑定的url，可以得到ssr后的页面。

实际结果：

  • 加载内容后跳转到空白页面。源代码是ssr处理过的内容。

bug描述：

  • 使用的云函数+dcloud前端托管（阿里云的服务空间），使用插件市场uni-ssr示例直接导入到HBX中，HBX的版本号是最近的4.75。
  • 使用hash的路由模式时，云函数url地址对应的页面可以直接访问。
  • 切换到history后，未做本地代码的任何修改，并且已经将前端网页托管路由中的首页和404已经改为index.html，但是用云函数的url打开后，会被重定向到一个空白页。
  • 而且，官方示例也会输出Hydration completed but contains mismatches.的错误，这个问题倒不大，不影响页面。
  • 按照文档中的指引，最终到了《不同的历史模式》这个文档中，这里面的设置如何应用到阿里云服务间的前端网页托管中呢？托管页面只有简单的设置。是要放到云函数的index.js中吗？

Image


更多关于uni-app SSR使用History模式页面空白问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

错误文档HTTP响应码改成200试试

更多关于uni-app SSR使用History模式页面空白问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢 。我测试了，此处修改没有效果。

目前我在manifest的h5的路由设置处，将base修改为uni-ssr云函数中设置的地址，即： “router”: {
“mode”: “history”,
“base”: “/m”
}, 这样子会解决页面空白或者说重定向的问题。但是页面自己的样式（页面名称+哈希值.css）还缺失，不知道这是哪儿错的，单独在index.html中引入就可以。 真希望官方公布下https://news.dcloud.io/的源码或者布置流程。

history下，你的base必须为空，因为前端托管只支持根目录下的网站支持history，其他目录只能是hash

回复 DCloud_uniCloud_VK: 谢谢。现在使用uni-ssr插件中的最简单的示例，改为history后，也是重定向到了空白页。使用hash模式时，不会跳转，但是对应页面的css也是缺失。

当做记录贴，今天还在尝试，希望能够实现https://news.dcloud.io/的效果

我发现，每次删除对应的云函数和前端托管的网页，会有些不同。继续研究中。 目前还是使用的history模式，页面可以显示正常了，但是页面的网络请求数据还没有调整，继续调整下看看。 只要能用，管它符不符合文档。

不容易，总算完成了一个大页面的ssr

在uni-app SSR中使用History模式时，页面空白通常是由于后端路由未正确配置导致的。根据Vue Router文档，History模式需要服务端支持通配路由，将所有未匹配的静态资源请求都指向index.html，由前端路由处理。

在阿里云前端网页托管中，你需要：

  1. 在托管配置中设置“首页”为index.html
  2. 设置“404页”也为index.html
  3. 确保路由规则将所有路径重定向到index.html

如果托管平台配置选项有限，可以在云函数index.js中实现fallback逻辑：

const express = require('express')
const server = express()

// 处理静态资源
server.use(express.static('dist'))

// 通配路由，返回index.html
server.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'))
})
回到顶部