使用 prerender-spa-plugin 预渲染 vue

时间 2019-11-09

标签使用 prerender spa plugin 渲染 vue 繁體版

原文原文链接

官方githubhtml

过程

正常打包出 html
prerender 访问生成的 html 进行渲染；注意若是有发请求获取数据，要代理
保存生成好的 html

注意点：

坑点vue

根组件的 wrapper id 要与 html 上的 wrapper id 相同

例如：webpack

<body>
  <div id="app"></div>
</body>

// app.vue
<template>
  <div id="app"></div>
</template>

由于预渲染时会消耗掉第一个 id，生成初始的html，若是须要后续的交互，那么app.vue 里也须要一个 id 供 vue 建立实例git

多页应用，一个 plugin 对应一个 html，注意生成的 html 都是 index.html 会覆盖，须要不一样文件夹.

例子

// webpack plugins

new PrerenderPlugin({
  // 生成 html 的文件夹
  staticDir: '/absolute/path',
  // 须要访问的 html 文件名
  indexPath: 'xxx.html',
  // 渲染后输出 html 的文件夹，暂时只能输出 index.html，不能更名字
  // 因为不能更名字，能够先输出到缓存文件夹，再用 copy-webpack-plugin 更名
  outputDir: '/output/dir',
  // 须要渲染的路由
  routes: ['/'],
  // html文件压缩
  minify: {
    minifyCSS: true,
    removeComments: true,
  },
  // 渲染器
  renderer: new Renderer({
    // 多个触发条件的话第一个才有效
    // 触发渲染的时间，用于获取数据后再保存渲染结果
    renderAfterTime: 5000,
    // 触发渲染的事件， document.dispatch(new Event('vue-mounted'))
    // renderAfterDocumentEvent: 'vue-mounted',
    // 触发渲染的元素，该元素生成后就保存渲染结果
    // renderAfterElementExists: '#app',
    // 是否打开浏览器，false 是打开。可用于 debug 检查渲染结果
    // headless: false,
  }),
  server: {
    // 代理，用于发送请求，设置与 webpack-dev-server 并不彻底相同
    proxy: {
      '/api': {
        target: 'http://localhost:' + config.prod.port || 3050,
        pathRewrite: {
          '^/api': '/',
        },
      },
      // proxy的属性用于express: app.use(key, proxy[key])
      // '/:foo': { target }, 能够不匹配 '/'
    },
  },
})