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 相关文章推荐
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
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
配置支持SSI
2006/11/25 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
PHP生成树的方法
2015/07/28 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
Python绘制数码晶体管日期
2021/02/19 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
优秀的个人求职信范文
2014/05/09 职场文书
社区护士演讲稿
2014/08/27 职场文书
python某漫画app逆向
2021/03/31 Python