prerender-spa-plugin Vue预渲染配合meta-info优化seo

时间:2021-10-10 03:49:23

记录一下解决方案的过程

先安装prerender和puppeteer插件  这个国外大神写的  github地址就不附上了(百度有)

cnpm install prerender-spa-plugin

npm install --save puppeteer --ignore-scripts

这里注意  一定要用cnpm代理下载   不然下载不到chromium

安装好之后注意在package.json上查看版本号  不同版本号有不同的写法  这个一定要注意(可以上github上查看不同版本的写法)

第一步:引入插件及方法(不同版本不同用法  此处版本为3.x,2.x请忽略)

prerender-spa-plugin Vue预渲染配合meta-info优化seo

第二步:配置PrerenderSPAPlugin

prerender-spa-plugin Vue预渲染配合meta-info优化seo

第三步:main.js中讲render-event方法放入

prerender-spa-plugin Vue预渲染配合meta-info优化seo

这里记住一定要将方法放入mouted里面

第四步:将mode设置为history模式(不用history模式不行!!!这里一定要改为history模式)

第五步:将config/index.js下的assetsPublicPath换成'../'

prerender-spa-plugin Vue预渲染配合meta-info优化seo

最后直接打包npm run build就可以了

过程中会出现minichrome测试浏览器,生成dist文件内包含预渲染文件目录

就到这里   meta-info参考官网设置就行