使用NUXTJS实现SEO网页自适应

场景

因为要做SEO，使用了nuxtjs，现在希望同一个url在pc端和移动端访问能有不同的表示，同时又希望代码层面是隔离开的，也不希望做重定向来实现，这个时候考虑能不能同一个url根据ua来返回不同的html内容。整理需求如下：

• 同一个url根据ua自动使用不同的表示
• pc和移动代码隔离

我这边的nuxt是2.15.3版本的，其他版本不确定会不会有问题

实现方案

以模块的形式扩展功能，在模块中重写nuxt的renderRoute方法，根据ua来判断是pc还是移动端访问。如果是移动端访问，将url解析映射到相应的移动端url上，以此来控制服务端返回的内容（这一步是处理服务端相关的内容）。然后在vue-renderer:ssr:context的钩子中根据布局方式layout来判断是哪种情况（我这边的实现，pc和移动端应该是两个不同的布局），以此来设置客户端的路由基础路径basePath，使得客户端创建实例的时候能正确解析路由（这一步是处理客户端相关的内容）。

新增模块

定义映射规则

比如可以定义成下面这样，有其他需求也可以自行定义成其他形式

{ name: 'tag-id', isDynamic: true, pc: '/web/tag/:tagId/:tab?', mobile: '/tag/:tagId/:tab?' } 这里用到了path-to-regexp这个库，vue-router2底层用的就是这个，具体用法可以去看文档。

然后增加一个函数来做映射这个行为，path-to-regexp我不太熟，大概是这个意思。

到这里，服务端返回到客户端的内容就改完了，此时爬虫抓取的内容就会根据ua自动判断。

但是在浏览器上的水合（hydration）步骤就会有问题了，因为服务器端和浏览器端的路由实际上已经不一致了，你可以看到相关的报错。

解决的办法就是在vue-renderer:ssr:context钩子中做处理，代码可以看上面截图。

最终效果

最终结果以下图的url为例

在pc端访问时，解析的结果对应到项目中的路由时/web/tag/:tagId，找到对应的页面

在移动端访问时，解析的结果对应到项目中，在服务器端的路由也是/web/tag/:tagId，但是此时增加了一个单独的解析，将结果变成/tag/:tagId。然后在客户端的创建路由时将基础路径改为/web/，同样转换为/tag/:tagId，找到对应的页面

如果遇到刷新页面后报错的情况，可能是base设置的问题，可以在middleware中增加判断。比如

源码浅析

在@nuxt/server中的方法renderRoute

然后看到@nuxt/vue-render

这部分就是返回到浏览器的内容，目标是修改里面的路由base，往上看可以找到相关的hook

这里有两个hook，一个备注写了可能要废弃，所以用vue-renderer:ssr:context

然后看到@nuxt/vue-app/template/client

客户端创建实例的过程是createApp->createRouter->mountApp

可以看出关键是NUXT.config,那么NUXT又代表什么呢?

其实就是Server的一个属性，对应的在浏览器中就是window.__NUXT__

因为水平有限，此处只是说明了一下相关的重要节点，具体细节可以自行查看哈~