使用 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 }, 能夠不匹配 '/'
    },
  },
})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。