vue.js - 如何预渲染多个 Vue 应用页面?
问题描述
我正在尝试(未成功)在使用 Vue CLI 搭建的同一个项目中预渲染多个 Vue 应用程序的 HTML。出于多种原因,我不想使用 Vue Router 或 Nuxt 等。
我试过使用prerender-spa-plugin,但由于我不使用路由,它只预渲染索引。
我的 vue.config.js 看起来像这样:
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 基本上是这样的:
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 页面。
prerender-spa-plugin的routes
参数似乎无法识别'/about.html'
. 有没有一种简单的方法可以实现多个预渲染页面?
我必须与 SSR 模块搏斗吗?
提前致谢。
解决方案
我找到的解决方案是new PrerenderSPAPlugin
多次调用,每条路线调用一次。
推荐阅读
- javascript - 等待过渡以 puppeteer 结束
- python - SQLAlchemy - 从 yaml 或字典创建表?
- uwp - 由于错误 ILT1307,无法发布 UWP 应用程序
- c# - 如何在ac#项目中实现FluentValidation
- javascript - 如何使用选择表单输出特定行?
- powershell - Active Directory:从域组件中检索数据
- r - 颜色轴与点相同
- excel - VBA 使用每个循环来划分一个范围
- javascript - 使用 fetch api javascript 获取值数组
- groovy - 为什么 micronaut 调用了错误的控制器方法?