vue單頁面seo(prerender-spa-plugin,vue-meta-info)

1. 先安裝prerender-spa-plugin插件：cnpm i prerender-spa-plugin --save

2. 修改webpack配置項,，在build目錄下的webpack.prod.conf.js中做兩步操作

var PrerenderSpaPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSpaPlugin.PuppeteerRenderer

 

 new PrerenderSpaPlugin({
      // 編譯後的html需要存放的路徑
      staticDir: path.join(__dirname, '../dist'),
      // 列出哪些路由需要預渲染
      routes: ['/', '/detail', '/about'],
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        renderAfterTime: 5000,
        headless: false
      })
    })

3.在main.js中修改成如圖樣子

好了prerender-spa-plugin插件就配置好了，接下來是vue-meta-info

1.安裝 cnpm i vue-meta-info --save

2.在main.js中引入，如圖

接下來就是使用了

然後執行命令 npm run build

看dist目錄下是否有

然後把dist目錄下的文件扔到服務器上運行，

異步數據成功渲染

下面是源碼：