uni-app ssr(服务器渲染) + 动态路由(伪静态) + seo优化

uni-app ssr(服务器渲染) + 动态路由(伪静态) + seo优化

uni-app主要用于小程序开发 也支持H5开发。由于使用的是vue单页面。所以想要搜索引擎seo优化的难度是相当大。uni-app只提供了一个托管云函数的ssr方式，作用相当有限。所以这个轮子必须得自己来造。

这些坑帮你们踩过了 不要去踩了。 1：ssr(服务器渲染) 只支持托管代码到uni-app云函数上。 2：路由是pages.json写死的单页面不支持伪静态 3：路由不能使用自己的vue-router@4 4：路由不能自行增加addRouters uni-app会去自己的对象检测路由是否存在。 5：哪怕检测路由你都绕过了 你会发现页面不会调用onLoad这些生命周期。当普通组件而不是页面级组件。而且ssr服务端也不支持。

1：解决动态路由： 就是一个页面组件 实现多个路径都可以访问。 比如/pages/index/id /id/:id 定义这样的动态高级路由。 有人会想到使用url参数不就可以了。 我的哥既然做seo优化。H5页面还在使用动态参数这样的动态路径。权重根本不高。 如果一个个的手动pages.json增加页面。那商城 文章这样的 怎么办。 所以要解决seo 必须要解决动态路由。

这条路坑很多。网上没有一个能用的。 都是解决路由守卫这些功能。并没有动态高级路由 但看都在说有个能用 但是价格有点小贵. 收费的。 因为这些我觉得我花时间研究uni-app源码自然可以解决。 最终功夫不负有心人找到了解决办法。

const hookRoute = (routes) => {

if (!routes && typeof __uniRoutes !== \’undefined\’) routes = __uniRoutes
if (!Array.isArray(routes)) return routes
const needPush = []
for (const route of routes) {

let seoPath = route?.meta?.seoPath || seoRoutes[route.path];
if (!seoPath) {

if (!route.path || route.alias) continue;
const seoPathSplit = route.path.split(\’/\’)
seoPath = `/${
seoPathSplit[seoPathSplit.length–1]}`
}
const newRoute = {
}
for (const k in route) newRoute[k] = route[k];
newRoute.path = seoPath
if (pathKeys[seoPath]) continue;
pathKeys[seoPath] = newRoute
needPush.push(pathKeys[seoPath])
}
routes.push(…needPush);
return routes
}

就这么简单。路由就增加好了。

但新的问题来了。测试普通路由这样动态添加没问题。 但动态高级路由这样添加就有问题。

上面说过就算增加了路由又能怎样。 uni-app有判断路由是否存在。 像 /id/:id 这样的路由 怎么能通过判断呢。

使用：alias 动态变更这个alias就能通过uni-app判断路由是否存在。

那就使用uni.addInterceptor 拦截器拦截请求之前动态设置这个alias就实现。

function seoHook(path) {

if (!path || typeof</