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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
Js四则运算函数代码
Jul 21 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
vue 调用 RESTful风格接口操作
Aug 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
如何把PHP转成EXE文件
2006/10/09 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
javascript 中__proto__和prototype详解
2014/11/25 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python实现多线程抓取妹子图
2015/08/08 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
python缩进长度是否统一
2020/08/02 Python
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
培训讲师邀请函
2014/01/10 职场文书
支教自我鉴定
2014/01/18 职场文书
三年级语文教学反思
2014/02/01 职场文书
护士长竞聘书
2014/03/31 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
高二数学教学反思
2016/02/18 职场文书