谈谈我在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 动态添加表格行
Jun 22 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
常规表格多表头查询示例
Feb 21 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
Vue性能优化的方法
Jul 30 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中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
TensorFlow实现简单卷积神经网络
2018/05/24 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
python TCP包注入方式
2020/05/05 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
行政文员岗位职责
2013/11/08 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
初中优秀学生评语
2014/12/29 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
终止劳动合同通知书
2015/04/16 职场文书
情人节单身感言
2015/08/03 职场文书
《藏戏》教学反思
2016/02/23 职场文书