Vue SPA 的 Prerender html 文件的自定义目录

Question

轮到我问关于 Vue App 中 prerender-spa-plugin 的问题了。

我想将呈现的路由页面 HTML 从 /dist 文件夹分配到子文件夹中，例如以下格式：

/dist/
 - index.html
 - /pages/
     - about.html
     - contact.html

和现在一样，我的 about.html 和 contact.html 与 index.html

一起呈现在 dist

我的 vue.config.js 的 SPA 预呈现片段如下

pluginOptions: {
    prerenderSpa: {
      registry: undefined,
      renderRoutes: [
        '/',
        '/about'
        '/contact',
      ],
      useRenderEvent: true,
      headless: true,
      onlyProduction: true,
    },

那么我如何才能实现上面格式的渲染呢？我觉得 renderedRoute 是我需要处理的事情。提前谢谢你 (_ _ ;)

Answer 1

这是可能的，但你改变了一些东西。

首先你需要在 VueRouter 中更改你的路由。您必须按照以下方式声明您的路线：

// ./src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import Contact from '@/views/Contact.vue';

Vue.use(VueRouter);

// IMPORANT HERE
const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/pages/contact.html', name: 'contact', component: Contact },
  { path: '/pages/about.html', name: 'About', component: About },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

注意你的路线必须在你的路径中用“.html”声明。

其次你必须改变你的"vue.config.js":

//vue.config.js
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),

        // IMPORTANT HERE
        routes: ['/', '/pages/about.html', '/pages/contact.html'],

        // IMPORTANT HERE
        postProcess(renderedRoute) {
          renderedRoute.route = renderedRoute.originalRoute;
          renderedRoute.html = renderedRoute.html.split(/>[\s]+</gim).join('><');
          if (renderedRoute.route.endsWith('.html')) {
            renderedRoute.outputPath = path.join(__dirname, 'dist', renderedRoute.route);
          }
          return renderedRoute;
        },
      }),
    ],
  },
};

同样，您的路由必须使用“.html”声明，并且您必须应用自定义 postProcess 方法。

准备就绪。

Vue SPA 的 Prerender html 文件的自定义目录

Custom Dir for Prerender html files of Vue SPA

prerender

single-page-application

vue.js