众所周知，Vue SPA单页应用对SEO并不友好，当然也有相应的解决方案。这里有几个最近研究和使用的SEO解决方案。SRR和静止是基于Nuxt的。

1.SSR服务器渲染；2.静态；3.预渲染预渲染-spa-plugin；4.使用Phantomjs处理爬行动物。

1.SSR服务器呈现

关于服务器渲染：官网引入了Vue，既需要Vue版本又需要服务器，需要支持nodejs环境。

使用SSR的权衡：

受限于开发条件，浏览器特定的代码只能在一些生命周期钩子函数中使用；一些外部库可能需要特殊处理才能在服务器呈现应用程序中运行。环境和部署要求较高，需要Node.js服务器运行环境；在高流量的情况下，请准备好相应的服务器负载，明智地采用缓存策略。优点：

更好的SEO，因为搜索引擎爬虫抓取工具可以直接查看完全渲染的页面；更快的内容获取时间，尤其是在网络速度较慢或设备运行缓慢的情况下。缺点：(开发中遇到的坑)

1.一套代码和两套执行环境会导致各种问题。比如服务器没有窗口和文档对象，处理方法是添加判断。如果由客户端执行：

if(process . browser){ console . log(window)；}引用npm包，用dom操作，例如：wowjs，不能用import方法，而是用：

if(process . browser){ var { WOW }=require(' WOW js ')；require(' wow js/CSS/libs/animate . CSS ')；}2.Nuxt asyncData方法，在初始化页面之前获取数据，但只调用页面组件：

//并发加载多个接口：asynccessdata({ app，query}) {let [resa，resb，resc]=wait promise . all([app。$ axios.get ('/API/a ')，app。$ axios . get('/API/b ')App。$ axios.get ('/API/c ')，])返回{dataa:resa.data，datab:resb.data，datac:resc.data，}}获取asyncData中的参数：

1.获取动态路由参数，例如：

/list/:id'=='/list/123

接收：

异步异步数据({app，query }){ console . log(app . context . params . id)//123 } 2。获取网址？获取参数，例如：

/list？id=123

接收：

Asyncsyncdata ({app，query }){ console . log(query . id)//123 } 3。如果使用v-if语法，在联机部署时可能会遇到此错误：

初始化应用程序时出错。异常：无法在“节点”:上执行“appendChild”。此节点类型不支持此方法。在对象。我们[作为附属儿童]

根据github nuxt发行版第1552条，v-if应改为v-show语法。

4.如果坑太多，留着以后用。

2.静态

当Nuxt.js执行生成静态打包时，会忽略动态路由。

-|页数/-|索引。vue-| users/-| _ id。vue要求动态路由教师创建静态页面，您需要指定动态路由参数的值，并在routes数组中配置它们。

//nuxt . config . js module . exports={ generate : { route :['/users/1 '，'/users/2 '，'/users/3']}}运行打包，可以看到打包后的页面。

但是如果路由动态参数的值是动态的而不是固定的，该怎么办呢？

使用返回承诺对象类型的函数；回调的使用是回调函数(err，params)。

//nuxt.config.jsimport axios从“axios”导出默认值{ generate : { routes : function(){ return axios . get(' https://my-API/users ')。然后((RES)={ return RES . data . map((user)={ return { route : '/users/' user . id，payload : user } } } } }现在我们可以从/users/_id.vue访问有效负载，如下所示：

异步异步数据({params，错误，有效负载}) {if(有效负载)返回{user:有效负载}否则返回{user:等待后端。fetch user (params.id)}}如果你的动态路由中有很多参数，比如商品详细信息，可能有上万个。您需要一个接口来返回所有的标识，然后在打包时遍历标识，并在本地打包它们。如果产品被修改或从货架上移除，则需要重新包装。如果有大量的产品，包装是非常缓慢和不现实的。

优点：

纯静态文件，访问速度超快；与SSR相比，不涉及服务器负载的问题；静态网页不应该被黑客攻击，安全性更高。缺点：

如果有许多动态路由参数，则不适用。3.预渲染预渲染-spa-插件

如果只是用它来提升几个营销页面的SEO(比如/、/关于、/联系等。)，那么可能需要进行预渲染。不是使用web服务器实时动态编译HTML，而是在构建时通过预渲染简单地生成特定路线的静态HTML文件。这样做的好处是更容易设置预渲染，可以将前端作为一个完全静态的站点使用。

$ cnpm install prerender-spa-plugin-savevuecli3vue . config . js配置：

const PrerenderSPAPlugin=require(' prerender-spa-plugin ')；const Renderer=PrerenderSPAPlugin。木偶师；const path=require(' path ')；module . exports={ configurewebpack k : config={ if(process . ENV . node _ ENV！=='production ')返回；返回{ plugins :[new prerenderspaplugin({//生成文件的路径也可以和webpakc打包的路径相同。//下面这句话很重要！//此目录只能有一个级别。如果目录级别大于一级，生成时不会有错误提示，只会在预渲染时卡住。Staticdir:path。join(_ dirname，' dist ')，//对应于自己的路由文件。例如，如果A有参数，需要写成/a/param1。Routes: ['/'，'/product '，'/about']，//这个很重要。如果未配置此节，将不会预编译它。render 3360新渲染器({inject3360 {foo:' bar'}，headless : false，//in main.js，document . dispatchevent(new event(' render-event '))，它们的事件名称应该相互对应。renderafterdocumentevent : ' render-event ' })})，]，}；}} add in main.js:

Newvue ({router，render:h=h (app)，mounted(){ document . dispatchevent(new event(' render-event '))})。$ mount ('# app ')注意：必须在路由器中设置mode :“history”。

打包时可以看到文件，并将其打包到文件夹/index.html中，例如，about=about/index.html，其中包含html内容。

优点：

小改动，一个插件的引入就完成了；缺点：

不能使用动态路由；只有几页的项目适用，当有几百页时，打包会很慢；4.用幻影对付爬行动物

Phantomjs是基于webkit内核的无头浏览器，即没有UI界面，也就是浏览器，但其点击、翻页等与人相关的操作需要编程实现。

虽然“PhantomJS宣布终止开发”，但已经满足了Vue的SEO待遇。

事实上，这种解决方案是一种旁路机制。原理是通过Nginx配置确定访问源UA是否为爬虫访问。如果是，搜索引擎的爬虫请求被转发到节点服务器，然后完整的HTML被PhantomJS解析并返回给爬虫。

具体代码在这里盖章：vue-seo-phantomjs。

要安装global phantomjs、local express，请测试：

$ PhantomJS spider . js ' https://www . Baidu.com '如果你在命令行上看到html的推送，恭喜你，你已经征服了Phantomjs。

启动后，或者使用postman将User-Agent值添加到请求头中的Baiduspider，效果是一样的。

在线部署

节点、pm2、phantomjs、nginx相关配置的在线安装：

上游spider _ server { server localhost :3000；}服务器{ listen 80服务器名example.com；location/{ proxy _ set _ header Host $ Host : $ proxy _ port；proxy _ set _ header X-Real-IP $ remote _ addr；proxy _ set _ header _ X-forward-For $ proxy _ add _ X _ forward _ For；if($ http _ user _ agent ~ *)Baiduspider | twiter bot | face bookexternalhit | Roger bot | linkedinbot | embedy | quora链接预览| showyoubot | outbrain | Pinterest | slack bot | vkShare | W3C _ Validator | bing bot | soospider | Sogou Pic Spider | Google bot | 360 Spider’){ proxy _ pass http://Spider _ server；}}}优点：

完全不需要修改项目代码，可以按照原来的SPA进行开发。相比SSR的发展，成本不算太多；这是用SPA开发的项目的最佳选择。缺点：

部署需要节点服务器支持；爬虫访问比网页访问慢，因为常规资源是在返回到爬虫之前加载的。如果大量恶意模拟百度爬虫循环抓取，会造成服务器负载问题。解决方法是判断访问的IP是否是百度官方爬虫的IP。摘要

如果你建立了一个大型网站，比如购物中心，不要犹豫，直接在SSR服务器上渲染。当然，也有相应的坑在等着你。社区比较成熟，英语也比较好，所以所有的问题都很容易解决。

如果只是个人博客或者公司官网，其他三个都可以。

如果在用SPA开发的项目上执行SEO优化，并且支持节点服务器，请使用Phantomjs。

我很少写文章，这是我这个月对Vue SEO方案的探索，请指出错误的地方，谢谢理解~

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。