谈谈我在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 相关文章推荐
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
Javascript动画效果(2)
Oct 11 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
vue双向绑定简要分析
Mar 23 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 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
一个分页的论坛
2006/10/09 PHP
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
php批量删除操作代码分享
2017/02/26 PHP
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
python简单实现旋转图片的方法
2015/05/30 Python
详解python字节码
2018/02/07 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
秋季运动会广播稿
2014/02/22 职场文书
房屋出租协议书
2014/04/10 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
求职意向书
2014/07/29 职场文书
质量月活动总结
2014/08/26 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
皇城相府导游词
2015/02/06 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
在Python中如何使用yield
2021/06/07 Python
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
python 离散点图画法的实现
2022/04/01 Python