VUE（cli3.0）使用prerender-spa-plugin + vue-meta-info做SEO和预渲染的效果及处理 prerender-spa-plugin 打包出错

news/2024/5/9 23:29:42/文章来源:https://blog.csdn.net/qq_39235055/article/details/106661949

prerender-spa-plugin + vue-meta-info 做SEO和预渲染的效果

首先说说 prerender-spa-plugin 这玩意儿

这个就弄预渲染，好处就是预渲染可以极大的提高网页访问速度，配合一些meat插件，就可以可以满足SEO需求，尤其是开发到一半的项目没有配置SSR有需要SEO的需求，这个时候prerender-spa-plugin + vue-meta-info 就可以达到要求

1.安装（我用的npm）

npm install --save prerender-spa-plugin

2. vue.config.js配置文件和main.js文件的配置

            config.plugins.push(new PrerenderSPAPlugin({ //预渲染  处理页面SEOstaticDir: path.join(__dirname, 'dist'),// 需要进行预渲染的路由路径 我这里做的是首页routes: ['/home'], //需要预渲染的路由页面 我这只用了首页// html文件压缩minify: {minifyCSS: true, // css压缩removeComments: true // 移除注释},renderer: new Renderer({inject: {foo: 'bar'},headless: false,// 在 main.js 中 new Vue({ mounted () {document.dispatchEvent(new Event('render-event'))}})，两者的事件名称要对应上。renderAfterDocumentEvent: 'render-event'})}))

new Vue({router,store,render: h => h(App),mounted () {document.dispatchEvent(new Event('render-event')) // 预渲染// document.dispatchEvent(new Event('custom-render-trigger')) // 预渲染}
}).$mount('#app')

这个时候就可以打包了，到这一步有的人（本人遇见过）可能会出现这种情况，打包出错，但是dist文件有成功打包，这其实是预渲染打包文件失败，但是正常的打包文件成功，只不过没有预渲染

[prerender-spa-plugin] Unable to prerender all routes!
//[prerender-spa-plugin]无法渲染所有路线！

在这里插入图片描述

这个时候怎么办呢？直接看下面的代码 vue.config.js配置文件和main.js文件的配置

 config.plugins.push(new PrerenderSPAPlugin({ //预渲染  处理页面SEOstaticDir: path.join(__dirname, 'dist'),// 需要进行预渲染的路由路径 我这里做的是首页routes: ['/home'],// html文件压缩minify: {minifyCSS: true, // css压缩removeComments: true // 移除注释},renderer: new Renderer({inject: {foo: 'bar'},headless: false,// 在 main.js 中 new Vue({ mounted () {document.dispatchEvent(new Event('render-event'))}})，两者的事件名称要对应上。//直接注释下面这一句//renderAfterDocumentEvent: 'render-event'})}))

new Vue({router,store,render: h => h(App),mounted () {//document.dispatchEvent(new Event('render-event')) // 预渲染//上面一行注释，用下面这行document.dispatchEvent(new Event('custom-render-trigger')) // 预渲染}
}).$mount('#app')