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+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
JS快速实现简单计算器
Apr 08 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 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函数解决SQL injection
2006/10/09 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
js实现无缝滚动图
2017/02/22 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
酒店管理自荐信
2013/10/23 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
社区端午节活动总结
2015/02/11 职场文书
公司出纳岗位职责
2015/03/31 职场文书
会议通知格式范文
2015/04/15 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
餐厅开业活动方案
2019/07/08 职场文书