谈谈我在vue-cli3中用预渲染遇到的坑


Posted in Javascript onApril 22, 2020

前言

在开发自己的个人网站的时候后,选择了用vue来开发,不可避免的遇到要对seo做优化。鉴于目前页面也不多,因此首先采用的是预渲染的方式。

本来以为把插件一装,配置一配,咔咔咔就能搞定,结果发现并没有想的那么简单。因为首先就遇到了两个报错,折腾了半个晚上。

问题及解决方案

第一个报错:

Unable to prerender all routes!

这个问题是在设置好配置之后,build的时候报出来的。主要症状就是打开了浏览器后卡主不动,然后就强制退出了。

解决方案:

参考了github上的issus https://github.com/chrisvfritz/prerender-spa-plugin/issues/196

谈谈我在vue-cli3中用预渲染遇到的坑

很神奇的就好了!至于怎么神奇就后面再说?

第二个报错:

This relative module was not found:

这个报错也是编译的时候出现的。

解决方案:

routes里的前两个路由不要用懒加载的方式来写...?‍♀️

具体就是:

# vue.config.js
new PrerenderSPAPlugin({...
routes: ['/', '/pg1', '/pg2', '/pg3', '/pg4'],
...
# router/index.js
import Index from '../views/Index.vue'
import Pg1 from '../views/Pg1.vue'

const routes = [{
  path: '/',
  name: 'Index',
  component: Index, // 不要用懒加载
 },
 {
  path: '/pg1',
  name: 'Pg1',
  component: Pg1 // 不要用懒加载
 },
 {
  path: '/pg2',
  name: 'Pg2',
  component: () => import('../views/Pg2.vue'), // 可以用懒加载
 },

爬坑历程

第一个问题是最神奇的,按照他说的来说,就是不能渲染所有的路由,但我目前也就只有五个路由在配置里面,然后我减到两个路由还是报这个错,所以肯定不是路由的原因。按照github上的方案改写了之后,好像就好了。然后当时我就尽想着先编译成功再说,但等我回过头来,想再复现出来研究一下的时候,怎么都复现不出来...?‍♀️
当时时间也很晚了,没办法也就只好作罢了...

附上完整配置

# vue.config.js
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
  configureWebpack: () => {
  if (process.env.NODE_ENV === 'production') {
   console.log(process.env.NODE_ENV)
   return {
    plugins: [
     new PrerenderSPAPlugin({
      //要求-给的WebPack-输出应用程序的路径预渲染。
      staticDir: path.join(__dirname, './dist/fontend'),
      //必需,要渲染的路线。 
      routes: ['/', '/Pg1', '/Pg2', '/Pg3', '/Pg4'],
      //必须,要使用的实际渲染器,没有则不能预编译 
     
      renderer: new Renderer({
       inject: {
        foo: 'bar'
       },
       headless: false, //渲染时显示浏览器窗口。对调试很有用。 
       //等待渲染,直到检测到指定元素。
       //例如,在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` 
       renderAfterDocumentEvent: "render-event",
       renderAfterTime: 5000
      })
     })
    ]
   }
  } else {
   return;
  }

# main.js
new Vue({

 router,
 render: h => h(App),
 mounted() {
  document.dispatchEvent(new Event('render-event')) # 新增此句
 }
}).$mount('#app')

# router/index.js
import Index from '../views/Index.vue'
import Pg1 from '../views/Pg1.vue'
const routes = [{
  path: '/',
  name: 'Index',
  component: Index, // 不要用懒加载
 },
 {
  path: '/Pg1',
  name: 'Pg1',
  component: Pg1 // 不要用懒加载
 },
 {
  path: '/Pg2',
  name: 'Pg2',
  component: () => import('../views/Pg2.vue'), // 可以用懒加载
 },
 {
  path: '/Pg3',
  name: 'Pg3',
  component: () => import('../views/Pg3.vue'), // 可以用懒加载
 },
 {
  path: '/Pg4',
  name: 'Pg4',
  component: () => import('../views/Pg4.vue'), // 可以用懒加载
}]

参考链接
[1] vue-cli3.0预渲染 https://www.jianshu.com/p/813c21899540
[2]  Unable to prerender all routes! https://github.com/chrisvfritz/prerender-spa-plugin/issues/196

到此这篇关于谈谈我在vue-cli3中用预渲染遇到的坑的文章就介绍到这了,更多相关vue-cli3 预渲染内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript Window及document对象详细整理
Jan 12 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
jquery indexOf使用方法
Aug 19 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 #Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 #Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 #Javascript
微信小程序实现手指拖动选项排序
Apr 22 #Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 #Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 #Javascript
Vue computed 计算属性代码实例
Apr 22 #Javascript
You might like
php中的常用魔术方法总结
2013/08/02 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
jquery 简单的进度条实现代码
2010/03/11 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
jQuery中append()方法用法实例
2014/12/25 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
Python创建xml文件示例
2017/03/22 Python
Python tkinter和exe打包的方法
2020/02/05 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
大专自我鉴定范文
2013/10/23 职场文书
公务员职务工作的自我评价
2013/11/01 职场文书
高级人员简历的自我评价分享
2013/11/03 职场文书
安全资料员岗位职责
2013/12/14 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
环境保护标语
2014/06/20 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
美术教师个人总结
2015/02/06 职场文书
好人好事新闻稿
2015/07/17 职场文书
外出培训学习心得体会
2016/01/18 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
win sever 2022如何占用操作主机角色
2022/06/25 Servers