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 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
DIV菜单层实现代码
Nov 19 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
Vue如何获取数据列表展示
Dec 11 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
PHPAnalysis中文分词类详解
2014/06/13 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
php 数组元素快速去重
2017/05/05 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
基于jquery的表头固定的若干方法
2011/01/27 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
python关闭windows进程的方法
2015/04/18 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
Python 实现微信自动回复的方法
2020/09/11 Python
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
高职教师岗位职责
2013/12/24 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
企业文化宣传标语
2014/06/09 职场文书
水利水电专业自荐信
2014/07/08 职场文书
施工安全责任书范本
2014/07/24 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
教师节大会主持词
2015/07/06 职场文书
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers