低成本代替Nuxt的預渲染解決方案

時間 2019-11-06

標籤低成本代替 nuxt 渲染解決方案简体版

原文原文鏈接

因爲公司的前端框架是Vue全家桶，因此不可避免地要面對SEO的問題，然而boss並不想在服務器端使用Nuxt，否則就能夠瓜熟蒂落地使用Nuxt，我也能夠順帶學習下。因而boss讓我看看有沒有什麼輕量級的解決方案，做爲程(da)序(gong)員(zai)我怎麼能說不呢！固然是一陣瘋狂谷歌而後開幹了。
javascript

經過一陣鼓搗以後發現結合兩個webpack插件能夠勉強在SEO要求不高的場景下代替SSR，固然只是本司這個業務場景下適合，若是對SEO要求比較高的話仍是乖乖上Nuxt。

插件介紹：

vue-meta-info 設置vue 單頁面meta info信息，同時支持SSR。php

prerender-spa-plugin 在單頁面應用程序中預呈現靜態HTML。前端

第一個插件是國內一個小哥寫的，同時他也推薦配合prerender-spa-plugin插件使用，我也確實用了，感受仍是挺配的。

vue-meta-info使用介紹：

仍是建議各位猿去看下GitHub上的文檔，畢竟做者是最熟悉本身寫的項目的。vue

NPM：java

$  npm install vue-meta-info --save
複製代碼

全局引入：webpack

import Vue from 'vue'
import MetaInfo from 'vue-meta-info'

Vue.use(MetaInfo)
複製代碼

組件內使用：git

<template>
  ...
</template>

<script>
  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/'
      }]
    }
  }
</script>
複製代碼

上述內容都是前端和SEO的一些基礎，若是已經有現成的線上內容就能夠打開F12複製粘貼。我寫到這裏就夠用了，由於對SEO的要求也不高，固然若是你的title和meta是異步加載的，也能夠按照下面的來配置。github

<template>
  ...
</template>

<script>
  export default {
    name: 'async',
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: 'loading'
      }
    },
    mounted () {
      setTimeout(() => {
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>
複製代碼

插件還支持SSR，不過這裏不介紹了，須要的話自行去看GitHub上的文檔。

prerender-spa-plugin 使用介紹：

其實這個插件還依賴chromium內核，有興趣的朋友能夠去看下渲染原理，這裏還能夠順帶了解下爬蟲的知識。web

我司的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是會編譯成相同的文件，能夠參照個人：vue-cli

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',
      ]
複製代碼