Question

猜我该在Vue App中询问有关prerender-spa-plugin的问题。

我想将/dist文件夹中的渲染路由页面HTML分配到以下格式的子文件夹中：

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

到目前为止，我的about.html和contact.html与dist一起在index.html渲染

我的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文件的自定义目录

1 个答案: