记录一下解决方案的过程

先安装prerender插件  这个国外大神写的  github地址就不附上了

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

cnpm install prerender-spa-plugin

这里注意  一定要用cnpm代理下载   不然下载不到minichorme测试浏览器

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

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

prerender-spa-plugin Vue预渲染配合meta-info优化seo 随笔 第1张

第二步:配置PrerenderSPAPlugin

prerender-spa-plugin Vue预渲染配合meta-info优化seo 随笔 第2张

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

prerender-spa-plugin Vue预渲染配合meta-info优化seo 随笔 第3张

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

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

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

prerender-spa-plugin Vue预渲染配合meta-info优化seo 随笔 第4张

 

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

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

 

 

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

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄