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简单工厂模式用法实例
Jun 30 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
webpack打包多页面的方法
Nov 30 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
文字幻灯片
2006/06/26 Javascript
图片按比例缩放函数
2006/06/26 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
js简单抽奖代码
2015/01/16 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
python实现360的字符显示界面
2014/02/21 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
python实现网页录音效果
2020/10/26 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
会计专业应届生求职信
2013/11/24 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
高一作文之暖冬
2019/11/09 职场文书
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记