记录vue预渲染prerender-spa-plugin踏坑

最新推荐文章于 2024-07-30 15:37:14 发布

zhaolinru

最新推荐文章于 2024-07-30 15:37:14 发布

阅读量1.2k

点赞数

分类专栏： vue seo prerender-spa-plugin 文章标签： vue的seo vue预渲染预渲染后百度商桥 prerender-spa-plugin

本文链接：https://blog.csdn.net/zhaolinru/article/details/103493248

版权

本文详细记录了在Vue项目中使用prerender-spa-plugin进行预渲染时遇到的问题及解决方案，包括安装插件、配置webpack、处理百度商桥重复加载等，旨在帮助开发者解决SEO和首屏渲染问题。

摘要由CSDN通过智能技术生成

1.安装

命令：cnpm install prerender-spa-plugin -D //避免报错，会自动下载文件等待

2.找到build下的webpack.prod.conf.js

头部添加

const PrerenderSPAPlugin = require('prerender-spa-plugin') //引用插件

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

plugins: [

// 配置PrerenderSPAPlugin预渲染

new PrerenderSPAPlugin({

// 生成文件的路径，也可以与webpakc打包的一致。

staticDir: path.join(__dirname, '../dist'),

// 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。

routes: ['/','/about'],

// 这个很重要，如果没有配置这段，也不会进行预编译

renderer: new Renderer({

// inject:{

// foo:'bar'

// },

// 触发渲染的时间，用于获取数据后再保存渲染结果

renderAfterTime: 5000,