低成本代替Nuxt的预渲染解决方案

由于公司的前端框架是 Vue 全家桶，所以不可避免地要面对 SEO 的问题，然而 boss 并不想在服务器端使用Nuxt (opens new window)，不然就可以顺理成章地使用Nuxt (opens new window)，我也可以顺带学习下。于是 boss 让我看看有没有什么轻量级的解决方案，作为程(da)序(gong)员(zai)我怎么能说不呢！当然是一阵疯狂谷歌然后开干了。

通过一阵鼓捣之后发现结合两个webpack插件可以勉强在SEO要求不高的场景下代替SSR，当然只是本司这个业务场景下适合，如果对SEO要求比较高的话还是乖乖上Nuxt (opens new window)。

插件介绍：

vue-meta-info (opens new window) 设置 vue 单页面 meta info 信息，同时支持 SSR。 prerender-spa-plugin (opens new window) 在单页面应用程序中预呈现静态 HTML。

• 第一个插件是国内一个小哥写的，同时他也推荐配合 prerender-spa-plugin 插件使用，我也确实用了，感觉还是挺配的。

---

vue-meta-info 使用介绍：

还是建议各位猿去看下 GitHub 上的文档，毕竟作者是最熟悉自己写的项目的。

NPM：

$  npm install vue-meta-info --save

全局引入：

import Vue from "vue";
import MetaInfo from "vue-meta-info";

Vue.use(MetaInfo);

组件内使用：

  export default {
    metaInfo: {
      title: 'My Example App',   // 标题
      meta: [{                 // meta的内容
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // link链接
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }

上述内容都是前端和 SEO 的一些基础，如果已经有现成的线上内容就可以打开 F12 复制粘贴。 我写到这里就够用了，因为对 SEO 的要求也不高，当然如果你的 title 和 meta 是异步加载的，也可以按照下面的来配置。

export default {
  name: "async",
  metaInfo() {
    return {
      title: this.pageName
    };
  },
  data() {
    return {
      pageName: "loading"
    };
  },
  mounted() {
    setTimeout(() => {
      this.pageName = "async";
    }, 2000);
  }
};

插件还支持 SSR，不过这里不介绍了，需要的话自行去看 GitHub 上的文档 (opens new window)。

---

prerender-spa-plugin 使用介绍：

其实这个插件还依赖 chromium 内核，有兴趣的朋友可以去看下渲染原理，这里还可以顺带了解下爬虫的知识。

• 我司的 webpack 配置是直接自己配置，没有使用 vue-cli3，所以大家可以参考结合一下。

const path = require("path");
const PrerenderSPAPlugin = require("prerender-spa-plugin");

module.exports = {
  plugins: [
    ...new PrerenderSPAPlugin({
      // 编译输出的文件路径和文件夹名
      staticDir: path.join(__dirname, "dist"),
      // 需要预渲染的路由，可以对照自己的router文件来写
      routes: ["/", "/about", "/some/deep/nested/route"]
    })
  ]
};

如果你有很多子路由的话，routes 那里 index.vue 是不用写上去的，比如/home/index 和/home 是会编译成相同的文件，可以参照我的：

new PrerenderSpaPlugin({
      staticDir: path.join(__dirname, '../dist'),
      ouputDir: path.join(__dirname, '../dist/loader'),
      routes: [
        '/',

        '/home',
        '/home/info',

        '/activity',
        '/activity/rank',

        '/title',
        '/title/optimize',
        '/title/long',

        '/goods',
        '/goods/similar',

        '/mall',
      ]

一般来说这样配合 vue-meta-info 是可以完成常规的 SEO 需求了，打包的时候会生成静态 HTML 文件，title 和 meta 以及 HTML 内容都可以被爬虫抓取到。如果想要高级的用法肯定还是要仔细阅读他的GitHub 文档 (opens new window)了。

其实吧，如果需求比较复杂且 SEO 要求比较高的话当然是建议直接上Nuxt (opens new window)。当然，在国内最简单暴力的方法还是给某度充钱，人民币玩家才不跟你玩啥技术呢。