vue使用预渲染prerender-spa-plugin

前言：vue单页面对seo不友好，所以我打算通过预渲染来解决下seo问题。

目前我知道有2种方法,

（1）SSR渲染（服务器）

（2）prerender-spa-plugin插件预渲染（部分路由）（好像不能全部路由）

在这里我使用的是第二个方法

1、安装插件prerender-spa-plugin

npm install prerender-spa-plugin --save
// or   2个中选1个方法安装
npm install prerender-spa-plugin --save

2、在vue.config.js里面配置需要预渲染的页面

const webpack = require('webpack')
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');module.exports = {publicPath: '/',configureWebpack: config => {if (process.env.NODE_ENV !== 'production') return;return {plugins: [new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000 // 通过合并小于 minChunkSize 大小的 chunk，将 chunk 体积保持在指定大小限制以上}),new PrerenderSPAPlugin({// 生成文件的路径，也可以与webpakc打包的一致。// 下面这句话非常重要！！！// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。staticDir: path.join(__dirname, 'dist'),// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。routes: ['/', '/swaps', '/eip-1559', '/faqs'],// 这个很重要，如果没有配置这段，也不会进行预编译renderer: new Renderer({inject: {foo: 'bar'},headless: false,// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。renderAfterDocumentEvent: 'render-event'})}),],};},}

其中有一个坑，如果打包之后部署到服务器，刷新出现路由地址自动添加/，并且页面样式丢失。那么可能是

publicPath: '/'

这个地方，你可能是’./‘，但是在预渲染这里要变成’/‘，才不会出现这个问题

3、在main.js里面配置

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

4、进行打包

npm run build

5、打包出现多个页面就成功

vue使用预渲染prerender-spa-plugin相关推荐

vue服务器端预渲染prerender-spa-plugin的实践
对一个网站来说,seo是非常重要的一块内容.最近用vue做了一个网站,很自然地找到了Vue SSR 指南.我做的网站只有几个注重营销的页面需要seo,发现在这种场景下用prerender-spa-pl ...
预渲染vue.js应用程序（使用node或laravel）
服务器端渲染现在非常流行.但它也并非没有缺点.预渲染是一种替代方法,在某些情况下甚至可能更好.下面我们来看一下如何预渲染vue.js应用程序. 在本文中,我们将探讨预渲染如何与vue.js一起工作,并 ...
ajax div 赋值重新渲染_优化向：单页应用多路由预渲染指南
前言 Ajax 技术的出现,让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容,这就是单页应用.在一个单页应用中,往往只有一个 html 文件,然后根据访问的 url 来匹配对应的路由脚本, ...
构建时预渲染：网页首帧优化实践
前言自JavaScript诞生以来,前端技术发展非常迅速.移动端白屏优化是前端界面体验的一个重要优化方向,Web 前端诞生了 SSR .CSR.预渲染等技术.在美团支付的前端技术体系里,通过预渲染提 ...
对vue服务端渲染的理解以及其使用场景
理解本质上,服务端渲染其实是生成了应用程序的"快照",将vue及其对应的库运行在服务端,令其去访问接口去预加载数据,然后将获取到的数据作为组件的初始状态首先拉取数据,此后,组件 ...
Vue SPA项目SEO优化之预渲染Prerender-spa-plugin
目的由于基于Vue的SPA项目普通的爬虫无法爬取项目的静态文本的内容,通过预渲染插件prerender-spa-plugin解决vue的SPA项目的SEO问题. 可以看到项目编译后的index.ht ...
prerender ajax,Vue Prerender.io 预渲染seo优化
前言目前 Vue单页面应用在前端界混的风生水起,它的开发思想使得我们能真正做到前后端分离.解耦.单页面应用使用浏览器动态解析JS,呈现出最终的页面,用户体验比较好,网站性能也提高不少.但网络爬虫并不 ...
prerender html5,HTML5 VUE单页应用 SEO 优化之预渲染（prerender-spa-plugin）
前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是单页面应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...
vue使用prerender预渲染配合vue-meta实现单页面实现SEO优化
公司项目在已在开发完成的情况下通知需要做SEO优化.因为项目使用的是vue做的单页面应用,顿时人都不好了,只好网上搜罗出来一些配置(其实是另一个带我的老大哥他做的,但是他要走了,工作交接给我, 我需要 ...