• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

vue cli4 预渲染生成静态html文件,seo优化,prerender-spa-plugin

当我们使用vue去创建一个官网的时候,或者是其他传统类型的html,就会触碰到vue的痛点,他没有seo优化。

因为所有的html全是js生成,你打包出来的文件,最终也只是一个简单的index.html,里面可以说什么都没有。这样的话是不利于爬虫抓取的,所以我们需要进行预渲染。

目前我将预渲染分为两种:

  1. 服务器渲染 ssr
  2. 本地打包渲染

服务器渲染ssr可能很多人不太清楚怎么回事,其实只要知道node后台服务搭建,那就肯定是知道的,因为所有的node框架,他都绕不过一个知识点,就是模板语法渲染html页面,这个就是所谓的ssr了。

可以理解成node的php写法吧。

这个由于目前还未遇到,而且之前学node也有写一些模板渲染的文章,就不多说了,这里讲讲如何通过插件,进行本地打包预渲染。

本地打包预渲染可以生成静态html文件,每个html文件都会有对于的信息,这样有利于爬虫抓取,但是你以为就像你平时写静态html文件那样的效果吗?

no no no 。。。

用户访问,实际上还是和单页app一样,index.html进去,通过js生成html,无刷新体验,而我们预渲染生成的文件,只是给爬虫抓。

prerender-spa-plugin 预渲染

使用该插件的优势就是在不改变源代码的情况下,可以生成静态html文件,这样任何项目都很快的上手,基本无损,除了安装插件非常头疼。

安装这个插件,非常艰难,因为这个组件需要依赖无头浏览器Puppeteer,而Puppeteer已经是几年前的产物了,已经很久不更新了,而且在国内环境,这个东西下载90%几率都是失败。

为此我总结了两点要求:

  1. 必须要翻墙,并且网络还要很好
  2. 本地配置.npmrc配置文件

.npmrc配置文件直接在项目根目录创建,和package.json同级,文件名就是这个名字。

然后在里面填入:

puppeteer_download_host = https://npm.taobao.org/mirrors

然后保存。

开启fq,然后进行安装:

yarn add prerender-spa-plugin --dev

安装成功后,我们需要配置vue.config.js文件

module.exports = {
  chainWebpack: config => {
    //生产环境下
    if (process.env.NODE_ENV === "production") {
      //引用插件
      const PrerenderSPAPlugin = require('prerender-spa-plugin');
      const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
      return {
         plugins: [
          new PrerenderSPAPlugin({
            // 生成文件的路径,也可以与webpakc打包的一致。
            // 下面这句话非常重要!!!
            // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
            staticDir: path.join(__dirname, 'dist'),
            // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
            routes: ['/', '/xxxx'],
            // 这个很重要,如果没有配置这段,也不会进行预编译
            renderer: new Renderer({
              inject: {
                foo: 'bar'
              },
              headless: false,
              // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
              renderAfterDocumentEvent: 'render-event'
            })
          }),

        ],
      }
    }
  
  }
}

这里,我们只需要修改routes这个数组,这个数组的值对应了你路由里面的页面,比如我有一个/user的页面路径,那么这里也就填上/user

注意,路由必须是history模式

如果路由修改了base,那么可能会出现问题,我暂时未碰到这种需求,以后遇到了再折腾吧。

配置完vue.config.js后,我们还需要修改main.js

new Vue({
  router,
  store,
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('render-event'));
  }
}).$mount('#app')

我们加上一个mounted生命周期,里面照着写吧,反正也没啥好说的。

然后保存。

这样我们运行打包:yarn run build

你会发现dist里面会生成对应的静态html文件,并且打开html,里面是有内容的。

以上就是预渲染的教程了。

0
  • 本文分类:vue 项目实战
  • 本文标签:vuevue cli静态化seo优化prerender-spa-plugin
  • 流行热度:已超过 241 人围观了本文
  • 最后更新:2020年11月11日 - 0时57分38秒
  • 发布日期:2020年11月11日 - 0时57分38秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码