技術標籤：vuevueseo

1. 引包

cnpm install prerender-spa-plugin -D

2. 在webpack.prod.conf.js 放入

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

  plugins: [
    new PrerenderSPAPlugin({
      //你存放的靜態資源目錄
      staticDir: path.join(__dirname,
 
 '../dist'),
      //哪些路由進行SEO，陣列形式，可以多個路由
      routes: ['/', '/Agreement','/Advert','/wechatH5/Recharge','/wechatH5/Login'],
      renderer: new Renderer({
        inject: {
          foo: 'far'
        },
        headless: false,
        //文件事件渲染後呼叫的事件名，在專案的入口中使用
        renderAfterDocumentEvent: 'render-event'
 

      })
    }),
    ]

3. main.js 啟用

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
  mounted() {
    document.dispatchEvent(new Event('render-event'))
  }
})

4. npm run build 打包 生成檔案如下：