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

前言

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

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

问题及解决方案

第一个报错:

Unable to prerender all routes!

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

解决方案:
参考了github上的issus github.com/chrisvfritz…

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

第二个报错:

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预渲染 www.jianshu.com/p/813c21899…

[2] Unable to prerender all routes! github.com/chrisvfritz…

原文链接:juejin.im

上一篇:Angular 中的可观察对象
下一篇:浓缩的就是精华——ES6模块精炼讲解

相关推荐

  • 🚩Vue源码——组件是如何注册的

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 在上一篇 🚩Vue源码——组件...

    1 个月前
  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    1 个月前
  • 🚩Vue源码——如何监听数据变化

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue 是用数据来驱动来生成视图...

    11 天前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问�...

    6 个月前
  • 🏆 掘金技术征文|双节特别篇 vue3——composition API

    vue3刚出测试版的时候尝过一次,后来学了react,才尝出点味道来,现在再尝一遍,先从重要的compositon api入手! composition api 主要是把之前vue的核心api暴露出来...

    18 天前
  • 🎉🎉🎉 一个基于vue3+vite+ts的完整项目

    VUE VBEN ADMIN2.0 介绍 vue-vben-admin-2.0 是一个全新的开源系统,基于ant-design-vue2.x,typescript4,vue3,vite实现的 ...

    15 天前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • 🌓vue页面换肤实践

    前言 最近要做一个换肤的功能,不过只是对一个页面换肤,换一下背景图呀,背景、边框、字体颜色呀之类的,并非整个项目换肤,相对比较简单,所以以下介绍的换肤方法仅适用于页面换肤而非整个项目换肤。

    2 个月前
  • (记录)vue、element表格首行跑到最后一行去了

    问题 项目中,我们一般会对 Element 进行二次封装,因为这样更好的全局管理组件,一处改动即可全局改动。比如你有十个表格,因为表格需要新增一个小功能(比如:右上角新增一个控制列显示的按钮),这时...

    1 个月前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    6 个月前

官方社区

扫码加入 JavaScript 社区