vuecli中使用预渲染技术解决SEO对SPA不友好问
题
快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题
单页面应用(SPA)对于SEO不友好的问题可以通过预渲染(Prerender)和服务端渲染(SSR)技术解决本文主要
记录
混凝土 养护记录下载土方回填监理旁站记录免费下载集备记录下载集备记录下载集备记录下载
预渲染技术在vuecli构建的项目中的使用用到插件prerender-spa-plugin、vue-meta-info内容1.引入依赖prerender-spa-plugin2.vue.config.js配置3.在main.js添加监听方法4.配置meta参数为什么SEO对单页面应用SPA不友好示例基于vue："^2.6.11"vue-cli："~4.5.0"⚠️：router中路由模式一定要修改为history才能生效，hash模式生成的页面都是一样的1.引入依赖prerender-spa-pluginnpmiprerender-spa-plugin--save-dev2.vue.config.js配置vue-cli4.x项目默认没有vue.config.js(3.x同样没有)，请手动创建配置如下：基本不需要修改，除了routes那里的配置，要改成你自己的路由constPrerenderSPAPlugin=require('prerender-spa-plugin');constRenderer=PrerenderSPAPlugin.PuppeteerRenderer;constpath=require('path');module.exports={configureWebpack:()=>{return{plugins:[newPrerenderSPAPlugin({//输出目录的绝对路径//这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。staticDir:path.join(__dirname,'dist'),//#预渲染的路由，对应自己的路由文件(这里要改)routes:['/home','/project','/develop','/develop/us','/develop/managers','/develop/activities','/develop/items'],//要使用的渲染器的配置renderer:newRenderer({//这个要选false，这样你在打包的时候，会看到一个浏览器调试器会闪出大约1-2秒的时间//如果发现这个浏览器调试器，出现之后，一直不消失，打包进度也一直不动，也不报错，这时要重新好好检查一下有什么地方出错了headless:false,//触发渲染的时间，用于获取数据后再保存渲染结果renderAfterTime:5000,//等待渲染，直到文档上调度指定的事件//在main.js中document.dispatchEvent(newEvent('render-event'))，两者的事件名称要对应上。renderAfterDocumentEvent:'render-event'})}),],};}};更多配置访问https://github.com/chrisvfritz/prerender-spa-plugin#about-prerender-spa-plugin3.在main.js添加监听方法此方法名要跟上面的vue.config.js中配置的renderAfterDocumentEvent一致newVue({render:h=>h(App),mounted(){document.dispatchEvent(newEvent('render-event'));}}).$mount('#app')这时候npmrunbuild，生成的文件是每个路由都会对应一个index.html4.配置meta参数要使用到插件vue-meta-infovue-meta-info是一个基于vue2.0的插件，它会让你更好的管理你的app里面的meta信息。你可以直接在组件内设置metaInfo便可以自动挂载到你的页面中。当然，有时候我们也可能会遇到让人头疼的SEO问题，那么使用此插件配合prerender-spa-plugin也是再合适不过了安装：npminstallvue-meta-info--save引入：//main.jsimportMetaInfofrom'vue-meta-info';Vue.use(MetaInfo);组件内使用：每个组件都可以设置不同的配置项exportdefault{name:"Home",metaInfo:{meta:[{name:"keywords",content:"...",},{name:"description",content:"...",},],},}具体步骤已经结束了，下面简易记录一下为什么SEO对单页面应用SPA不友好搜索引擎蜘蛛(网络爬虫)自动抓取网页内容时，会分析页面内容，例如：从meta标签中读取keywords、description的内容、根据语义化的html的标签爬取和分析内容搜索引擎蜘蛛在爬取的过程中，不会去执行js，所以隐藏在js中的跳转也不会获取到，vue通过js控制路由然后渲染出对应的页面，而搜索引擎蜘蛛是不会去执行页面的js的，导致搜索引擎蜘蛛只能收录index.html一个页面，在百度中就搜索不到相关的子页面的内容本文参考：/weixin_30852391/article/details/111915355/qq_40893035/article/details/111643676?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-0.no_search_link&spm=1001.2101.3001.4242.1&utm_relevant_index=3/qq_37564189/article/details/106090414 -全文完-
浙公网安备 33021202002483