如何预渲染多个 Vue 应用程序页面?

问题描述

限时删除！！

我正在尝试(未成功)在使用 Vue CLI 搭建的同一项目中预渲染多个 Vue 应用程序的 HTML.出于多种原因，我不想使用 Vue Router 或 Nuxt 等.

I'm trying (unsuccessfully) to pre-render the HTML of multiple Vue apps within the same project scaffolded with Vue CLI. I do not want to use Vue Router or Nuxt etc for multiple reasons.

我尝试过使用 prerender-spa-plugin，但因为我不不使用路由，它只预渲染索引.

I've tried using prerender-spa-plugin, but since I don't use routes, it only pre-renders the index.

我的 vue.config.js 看起来像这样:

My vue.config.js looks like this:

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

module.exports = {
  pages: {
    index: 'src/index.js',
    about: 'src/about.js',
  },
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/'],

        postProcess(route) {
          route.html = route.html.replace('</script><div>', '</script><div id="app" data-server-rendered="true">');

          return route;
        },

        renderer: new Renderer({
          headless: true,
          renderAfterDocumentEvent: 'render-event',
        }),
      }),
    ],
  },
};

我的 index.js 和 about.js 基本上是这样的:

and my index.js and about.js essentially look like this:

import Vue from 'vue';
import App from './Index.vue';

new Vue({
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('render-event'));
  },
}).$mount('#app');

我也有独特的 public/index.html 和 about.html 页面.

I also have unique public/ index.html and about.html pages.

prerender-spa-plugin 的 routes 参数似乎无法识别诸如 '/about.html' 之类的东西.有没有一种简单的方法可以实现多个预渲染页面?

The routes parameter of prerender-spa-plugin doesn't seem to recognise things like '/about.html'. Is there an easy way of achieving multiple pre-rendered pages?

我是否必须与 SSR 模块搏斗?

Do I have to wrestle with the SSR module?

提前致谢.

推荐答案

我找到的解决方案是多次调用 new PrerenderSPAPlugin，每个路由调用一次.

The solution I've found is to call new PrerenderSPAPlugin multiple times, one for each route.

这篇关于如何预渲染多个 Vue 应用程序页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..