前言

Vue是SPA单页面应用对SEO不太友好，如果你只是需要对少数页面需要做SEO处理（例如 / 首页，/关于我们等页面），可以使用预渲染 prerender-spa-plugin (插件)

一、prerender-spa-plugin是什么？

预渲染 prerender-spa-plugin会在构建时, 简单的针对特定路由, 生成静态 HTML 文件 (打包时可以帮你解析静态化)。
是解决Vue的SEO优化的解决方法之一。

1.优点

设置预渲染简单, 开发成本低，对代码的改动小，代码侵入性更低。

2.缺点

只适合于针对少数页面进行SEO的情况, 如果需要对几百上千的页面进行SEO优化, 就不推荐了 (会打包很慢）

二、使用步骤

1.安装 prerender-spa-plugin

npm install prerender-spa-plugin --save
or
yarn add prerender-spa-plugin

2.配置 prerender-spa-plugin

1）vue.config.js 配置

// vue.config.jsconst PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRendererfunction resolve(dir) {return path.join(__dirname, dir);
};// 修改资源打包路径
module.exports = {publicPath: '/', //资源路径，预渲染需要history模式，所以这块要改成'/'或者对应的（二级）路径,不能'./'configureWebpack:() => {if (process.env.NODE_ENV !== 'production') {return {};}else{plugins: [new PrerenderSPAPlugin({staticDir: resolve('dist'),// 读取vue-cli已打包文件的根目录 prerender-spa-plugin会在这里开启一个服务routes: ['/','/about' ],// 需要预渲染的路由minify: {minifyCSS: true, // css压缩removeComments: true // 移除注释},renderer: new Renderer({inject: {foo: 'bar'},// 渲染时显示浏览器窗口，调试时有用headless: false,renderAfterTime: 5000,// 等待触发目标时间后，开始预渲染renderAfterDocumentEvent: 'render-event'})})]}}
}

2）路由的index.js 配置

// router.js
mode:‘history’,//修改vue.config.js 中PublicPath: ‘/’ ；不然会导致刷新页面路径错乱导致样式或者js丢失

3）main.js 配置

// main.js
new Vue({el: '#app',router,store,render: h => h(App),// 预渲染mounted () {document.dispatchEvent(new Event('render-event'))}
})

总结，非根目录构建

以上是部署在根目录的预渲染配置，如果部署在二级目录（非根目录）中的，如构建后的 index.html 需放在 /xxx/路径下的情况，会出现打包很久无法成功也不报错，需要对配置做些变更，前往文章查看

vue项目seo优化-预渲染prerender-spa-plugin配置相关推荐

vue的SEO优化——预渲染后路由+点击事件失效问题解决
vue是单页面框架且前后端分离,不利于seo优化.针对这一点,还是有解决办法的. 预渲染后路由+点击事件失效问题解决--近期发现最近遇到了一个前台官网,由于时间比较紧,所以我选择了用vue框架去搭建 ...
Vue项目SEO优化之预渲染--prerender-spa-plugin 搭配vue-meta-info
Vue项目SEO优化之预渲染–prerender-spa-plugin 搭配vue-meta-info prerender-spa-plugin配置安装执行npm i prerender-spa- ...
Vue项目SEO优化解决方案
目录前言一. Vue 项目进行 SEO 优化 1. SSR服务器渲染 2. 静态化 (博客, 介绍性官网) 3. 预渲染 prerender-spa-plugin (插件) 4. 使用Phanto ...
vue项目SEO优化以及生成sitemap.xml
众所周知vue项目本质是单页面项目,对SEO优化十分不好,找起资料来更是麻烦.闲话不多说,分享一下我对自己项目进行的SEO方案及生成sitemap.xml. 需要的库 npm install site ...
Vue 项目性能优化方案
前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM:但 Vue 项目中仍然存 ...
前端Vue 项目性能优化
前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM:但 Vue 项目中仍然存 ...
vue项目seo prerender-spa-plugin
vue项目seo prerender-spa-pluginvue.config.jsprerender-spa-pluginvue-meta-info 修改部分代码以便于百度seo抓取metaInfo ...
使用vue如何seo优化
1 .首先怎么判断网站是用vue做的,我的方法当然是先搜一搜,当让搜出来的并不一定是,接下来可以用vue-develop这个插件,只要你安装了这个插件,是vue的网站该插件的图标就会点亮 2 .如何 ...
Vue-cli3项目seo优化--静态化打包（动态改变页面Titl、keyWords、description）
Vue-cli3项目seo优化,静态化打包(动态改变页面Titl.keyWords.description) 文章目录 Vue-cli3项目seo优化,静态化打包(动态改变页面Titl.keyWord ...

vue项目seo优化-预渲染prerender-spa-plugin配置

文章目录

前言