Пользовательский Dir для Prerender html файлов Vue SPA - PullRequest
Новая
       58

Пользовательский Dir для Prerender html файлов Vue SPA

0 голосов
/ 23 апреля 2020

Думаю, моя очередь спросить о prerender-spa-plugin в Vue приложении.

Я хотел назначить HTML-файлы с перенаправленными страницами из папки /dist в подпапки, например: формат: 

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

Как и сейчас, мои about.html и contact.html визуализируются вместо dist вместе с index.html

Мой фрагмент prerender SPA для vue.config.js как ниже 

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

Итак, как мне добиться моего рендеринга в формате выше? Я вроде как renderedRoute это то, что мне нужно иметь дело. Заранее спасибо (_ _;)

1 Ответ

0 голосов
/ 23 апреля 2020

Возможно, но вы что-то меняете.

Сначала вам нужно изменить маршруты в 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.

Готов .

...