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

前端菜鸟一枚

已于 2022-04-21 17:59:44 修改

阅读量1.4k

点赞数

分类专栏： vue 文章标签： Vue prerender-spa-plugin PuppeteerRenderer 预渲染 webpack

于 2022-04-21 17:58:49 首次发布

本文链接：https://blog.csdn.net/qq_40599116/article/details/124327911

版权

vue 专栏收录该内容

10 篇文章 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 没有做任何修改