谈谈我在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 相关文章推荐
$.format,jquery.format 使用说明
Jul 13 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 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
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
JS画线(实例代码)
2013/11/20 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
应届生污水处理求职信
2013/11/06 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
物流专业自荐信
2014/05/23 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
先进党支部申报材料
2014/12/24 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
python实现批量移动文件
2021/04/05 Python
浅谈Python协程asyncio
2021/06/20 Python