vue3 cli4 使用prerender-spa-plugin 预渲染

环境

Vue：3.0.0

node：v14.17.6

vue/cli：4.5.15

prerender-spa-plugin：3.4.0

1.安装

npm i prerender-spa-plugin -D

2.vue.config.js

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

module.exports = {
	productionSourceMap: false,
	lintOnSave: false, //关闭Eslint 

	configureWebpack: config => {
		config.plugins.push(
			new PrerenderSPAPlugin({
				staticDir: path.join(__dirname, './dist'),
				// 需要进行预渲染的路由路径 
				routes: ['/about'],
				// html文件压缩
				minify: {
					minifyCSS: true, // css压缩
					removeComments: true // 移除注释
				},
				renderer: new Renderer({
					inject: {
						// foo: 'bar'
					},
					// 在 main.js 中 new Vue({ mounted () {document.dispatchEvent(new Event('render-event'))}})，两者的事件名称要对应上。
					// renderAfterDocumentEvent: 'render-event'
					renderer: new PrerenderSPAPlugin.PuppeteerRenderer({ //这样写renderAfterTime生效了
						renderAfterTime: 5000
					})
				})
			})
		)
	}
}

3.main.js 没有做任何修改