2023年6月29日发(作者：)

基于VueSEO的四种⽅案（⼩结）前⾔：众所周知，Vue SPA单页⾯应⽤对SEO不友好，当然也有相应的解决⽅案，下⾯列出⼏种最近研究和使⽤过的SEO⽅案，SRR和静态化基于Nuxt来说。服务器渲染；2.静态化；3.预渲染prerender-spa-plugin；4.使⽤Phantomjs针对爬⾍做处理。服务器渲染关于服务器渲染： ，对Vue版本有要求，对服务器也有⼀定要求，需要⽀持nodejs环境。使⽤SSR权衡之处：1. 开发条件所限，浏览器特定的代码，只能在某些⽣命周期钩⼦函数 (lifecycle hook) 中使⽤；⼀些外部扩展库 (external library) 可能需要特殊处理，才能在服务器渲染应⽤程序中运⾏；2. 环境和部署要求更⾼，需要 server 运⾏环境；3. ⾼流量的情况下，请准备相应的服务器负载，并明智地采⽤缓存策略。优势：1. 更好的 SEO，由于搜索引擎爬⾍抓取⼯具可以直接查看完全渲染的页⾯；2. 更快的内容到达时间 (time-to-content)，特别是对于缓慢的⽹络情况或运⾏缓慢的设备。不⾜：（开发中遇到的坑）1.⼀套代码两套执⾏环境，会引起各种问题，⽐如服务端没有window、document对象，处理⽅式是增加判断，如果是客户端才执⾏：if(r){ (window);}引⽤npm包，带有dom操作的，例如： wowjs ，不能⽤ import 的⽅式，改⽤：if (r) { var { WOW } = require('wowjs'); require('wowjs/css/libs/'); } asyncData⽅法，初始化页⾯前先得到数据，但仅限于 页⾯组件 调⽤：// 并发加载多个接⼝： async asyncData ({ app, query }) { let [resA, resB, resC] = await ([ app.$('/api/a'), app.$('/api/b'), app.$('/api/c'), ])

return { dataA: , dataB: , dataC: , } }在asyncData中获取参数：1.获取动态路由参数，如：/list/:id' ==> '/list/123接收：async asyncData ({ app, query }) { () //123}2.获取url?获取参数，如：/list?id=123接收：async asyncData ({ app, query }) { () //123}3.如果你使⽤ v-if 语法，部署到线上⼤概也会遇到这个错误：Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. at [as appendChild]根据github nuxt上的 提⽰，要将 v-if 改为 v-show 语法。4.坑太多，留坑，晚点更。2.静态化在 执⾏ generate 静态化打包时，动态路由会被忽略。-| pages/---| ---| users/-----| _需要动态路由先⽣成静态页⾯，你需要指定动态路由参数的值，并配置到 routes 数组中去。// s = { generate: { routes: [ '/users/1', '/users/2', '/users/3' ] }}运⾏打包，即可看见打包出来的页⾯。但是如果路由动态参数的值是动态的⽽不是固定的，应该怎么做呢？使⽤⼀个返回 Promise 对象类型 的 函数；使⽤⼀个回调是 callback(err, params) 的 函数。// rt axios from 'axios'export default { generate: { routes: function () { return ('my-api/users') .then((res) => { return ((user) => { return { route: '/users/' + , payload: user } }) }) } }}现在我们可以从 /users/_ 访问的 payload ，如下所⽰：async asyncData ({ params, error, payload }) { if (payload) return { user: payload } else return { user: await ser() }}如果你的动态路由的参数很多，例如商品详情，可能⾼达⼏千⼏万个。需要⼀个接⼝返回所有id，然后打包时遍历id，打包到本地，如果某个商品修改了或者下架了，⼜要重新打包，数量多的情况下打包也是⾮常慢的，⾮常不现实。优势：纯静态⽂件，访问速度超快；对⽐SSR，不涉及到服务器负载⽅⾯问题；静态⽹页不宜遭到⿊客攻击，安全性更⾼。不⾜：如果动态路由参数多的话不适⽤。3.预渲染prerender-spa-plugin如果你只是⽤来改善少数营销页⾯（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。⽆需使⽤ web 服务器实时动态编译 HTML，⽽是使⽤预渲染⽅式，在构建时 (build time) 简单地⽣成针对特定路由的静态 HTML ⽂件。优点是设置预渲染更简单，并可以将你的前端作为⼀个完全静态的站点。$ cnpm install prerender-spa-plugin --savevue cli 3 配置：const PrerenderSPAPlugin = require('prerender-spa-plugin');const Renderer = eerRenderer;const path = require('path');s = { configureWebpack: config => { if (_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // ⽣成⽂件的路径，也可以与webpakc打包的⼀致。 // 下⾯这句话⾮常重要 // 这个⽬录只能有⼀级，如果⽬录层次⼤于⼀级，在⽣成的时候不会有任何错误提⽰，在预渲染的时候只会卡着不动。 staticDir: (__dirname,'dist'), // 对应⾃⼰的路由⽂件，⽐如a有参数，就需要写成 /a/param1。 routes: ['/', '/product','/about'], // 这个很重要，如果没有配置这段，也不会进⾏预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 中 chEvent(new Event('render-event'))，两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }), ], }; }}在中添加：new Vue({ router, render: h => h(App), mounted () { chEvent(new Event('render-event')) }}).$mount('#app')注意：router中必须设置 mode: “history” 。打包出来可以看见⽂件，打包出⽂件夹 / ，例如： about => about/ ，⾥⾯有html内容。优势：改动⼩，引⼊个插件就完事；不⾜：⽆法使⽤动态路由；只适⽤少量页⾯的项⽬，页⾯多达⼏百个的情况下，打包会很很很慢；4.使⽤Phantomjs针对爬⾍做处理Phantomjs是⼀个基于webkit内核的⽆头浏览器，即没有UI界⾯，即它就是⼀个浏览器，只是其内的点击、翻页等⼈为相关操作需要程序设计实现。虽然“PhantomJS宣布终⽌开发”，但是已经满⾜对Vue的SEO处理。这种解决⽅案其实是⼀种旁路机制，原理就是通过Nginx配置， 判断访问的来源UA是否是爬⾍访问，如果是则将搜索引擎的爬⾍请求转发到⼀个node server，再通过PhantomJS来解析完整的HTML，返回给爬⾍。 具体代码戳这⾥： 。要安装全局 phantomjs ，局部 express ，测试：$ phantomjs ''如果见到在命令⾏⾥出现了⼀推html，那恭喜你，你已经征服PhantomJS啦。启动之后或者⽤postman在请求头增加 User-Agent 值为 Baiduspider ，效果⼀样的。部署上线线上要安装 node

、 pm2

、

phantomjs ，nginx相关配置：upstream spider_server { server localhost:3000;}server { listen 80; server_name ;

location / { proxy_set_header Host $host:$proxy_port; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") { proxy_pass spider_server; } }}优势：完全不⽤改动项⽬代码，按原本的SPA开发即可，对⽐开发SSR成本⼩不要太多；对已⽤SPA开发完成的项⽬，这是不⼆之选。不⾜：部署需要node服务器⽀持；爬⾍访问⽐⽹页访问要慢⼀些，因为定时要定时资源加载完成才返回给爬⾍；如果被恶意模拟百度爬⾍⼤量循环爬取，会造成服务器负载⽅⾯问题，解决⽅法是判断访问的IP，是否是百度官⽅爬⾍的IP。总结如果构建⼤型⽹站，如商城类，别犹豫，直接上SSR服务器渲染，当然也有相应的坑等你，社区较成熟，英⽂好点，⼀切问题都迎刃⽽解。如果只是个⼈博客、公司官⽹这类，其余三种都可以。如果对已⽤SPA开发完成的项⽬进⾏SEO优化，⽽且⽀持node服务器，请使⽤ Phantomjs 。很少写⽂章，这是我这个⽉对Vue SEO⽅案的探索，写的不对的地⽅请指出，谢谢理解~以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。