vue-cli单页面预渲染seo-prerender-spa-plugin操作


Posted in Javascript onAugust 10, 2020

1 vue-cli-plugin-prerender-spa

使用方法:

vue add prerender-spa

在安装的过程中会需要安装一个chrome,网速不好可能导致不能下载,导致安装失败,可以取消chrome的安装,然后手动下载放在指定的目录下;

安装过程中选择需要预渲染的route

vue-cli单页面预渲染seo-prerender-spa-plugin操作

安装成功:

vue-cli单页面预渲染seo-prerender-spa-plugin操作

自动在main.js中加入:

vue-cli单页面预渲染seo-prerender-spa-plugin操作

2 使用prerender-spa-plugin插件

cnpm i prerender-spa-plugin --save-dev

vue-cli2.0 在build/webpack.prod.conf.js中:

const PrerenderSPAPlugin = require('prerender-spa-plugin')

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

注册插件:

在plugins中加入:

new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, '../dist'),//打包文件的路径,或者自定义一个文件路径
  routes: ['/test', '/'],//需要预渲染的route路径
  renderer: new Renderer({
  inject: {
   foo: 'bar'
  },
  headless: true,
  renderAfterDocumentEvent: 'render-event'//需要在实例化Vue中监听的事件,名称要相对应
  })
 })

vue-cli3.0

在vue.config.js

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

在main.js中加入:

new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>',
 mounted() {
 // You'll need this for renderAfterDocumentEvent.
 document.dispatchEvent(new Event('render-event'))
 }
})

以上这篇vue-cli单页面预渲染seo-prerender-spa-plugin操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
使用js在layui中实现上传图片压缩
Jun 18 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 Javascript
js实现计算器功能
Aug 10 #Javascript
js实现盒子拖拽动画效果
Aug 09 #Javascript
js实现盒子移动动画效果
Aug 09 #Javascript
js实现弹窗效果
Aug 09 #Javascript
js实现表格数据搜索
Aug 09 #Javascript
js实现微信聊天界面
Aug 09 #Javascript
js实现微信聊天效果
Aug 09 #Javascript
You might like
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
大学生求职工作的自我评价
2014/02/13 职场文书
人力资源职位说明书
2014/07/29 职场文书
2014年度培训工作总结
2014/11/27 职场文书
先进工作者推荐材料
2014/12/23 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
培根随笔读书笔记
2015/07/01 职场文书