vue項目添加prerender-spa-plugin設定，對頁面預渲染，利于seo

1.修改vue.config.js，添加如下代碼，先安裝 npm i prerender-spa-plugin

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const path = require('path')

 configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
        
          // 這個目錄隻能有一級
          staticDir: path.join(__dirname, 'dist'),
          // 對應自己的路由檔案，如果home有參數params,需要home/params
          routes: ['/', '/home', '/intro', '/contactUs', '/login'],
          // 預編譯配置
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false
          })
        })
      ]
    }
  }
           

2.修改main.js

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

添加完以上資訊後，運作npm run build,就會在dist目錄中生成對應路由的檔案夾

3.vue-meta-info，這個插件可以設定每個頁面title，meta的（keyword，description等），先安裝npm i vue-meta-info，

4.在mian.js中添加如下代碼

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
           

5.在home.vue 中使用

<template>
  <div>Home</div>
</template>

<script>
export default {
  name: 'Home',
  components: {},
  metaInfo: {
    title: 'home-首頁',
    meta: [
      {
        name: 'keywords',
        content: '關鍵字1,關鍵字2,...'
      },
      {
        name: 'description',
        content: '這是一段網頁的描述'
      }
    ]
  },
  data () {
    return {
    }
  },
  methods: {},
}
</script>
<style  scoped>
</style>
           

6.這樣不同頁面可以顯示不同的title，keyword，description