将vue等打包出来的dist静态文件,修改构建成为包含HTML内容的,SEO友好的静态页。基于@prerenderer/prerenderer进行了封装,以方便直接使用。
npm install @waitkafuka/spa-prerenderdist 目录作为输入,然后生成预渲染之后的html页面。生成的页面完全静态化,可以提升访问效率和SEO的友好。 javascript
const SpaRenderer = require('@waitkafuka/spa-prerender');
const path = require('path');const options = {
staticDir: path.join(__dirname, 'dist'),
basePath: 'base',//可选,当项目有basePath的时候设置。同router中的base和publicPath。确保staticDir/basePath/index.html存在
routes: ['/',
'/exam',
],
puppeteerOptions: {
headless: true,
maxConcurrentRoutes: 0,
renderAfterDocumentEvent: 'render-event',
skipThirdPartyRequests: true
}
};
const spaRenderer = new SpaRenderer(options)
spaRenderer.render().then(() => {
console.log('预渲染完毕。');
});
``