木灵鱼儿

木灵鱼儿

阅读：3018

最后更新：2020/11/11/ 0:57:38

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，里面是有内容的。

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

文章分类 vue 项目实战
文章标签 vuevue cli静态化seo优化prerender-spa-plugin
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 1获得阅读 3018

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 1
文章被阅读 3018

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目