您现在的位置是:首页 >学无止境 >Vue使用prerender-spa-plugin做预渲染,用于SEO优化相关内容网站首页学无止境
Vue使用prerender-spa-plugin做预渲染,用于SEO优化相关内容
简介Vue使用prerender-spa-plugin做预渲染,用于SEO优化相关内容
原因:像vue、react、angular开发的都是spa应用,他只有一个页面index,他们都是内加载,动态加载切换路由的,所以你再多页面百度蜘蛛只能爬到首页
1.解决方案
(1)vue.js官网提供的 SSR(服务端渲染) 这种方案呢学习成本高,对于刚开始的新手来说可能有点难度,基本还得重构项目,为了节约开发成本推荐选择第二种方案;
(2)预渲染:用vue官方的一句话来说,它无需使用 web 服务器实时动态编译 HTML,而是使用预渲染方式,在构建时 简单地生成针对特定路由的静态 HTML 文件。
1.1 安装prerender-spa-plugin
npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
npm i puppeteer
npm i prerender-spa-plugin --save -dev
1.2 vue.config.js 配置文件修改
(1)
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
(2)routes 里面配置需要预渲染的路由。
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。