谈谈我在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和DOM Interfaces来处理HTML
Oct 09 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
小程序如何写动态标签的实现方法
Feb 05 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 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实现的短网址算法分享
2014/06/20 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
跟老齐学Python之正规地说一句话
2014/09/28 Python
详解Python编程中time模块的使用
2015/11/20 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
大学四年个人自我小结
2014/03/05 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
门店店长岗位职责
2015/04/14 职场文书
上甘岭观后感
2015/06/10 职场文书
委托收款证明
2015/06/23 职场文书
八年级语文教学反思
2016/03/03 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL