浅谈vue单页面seo问题
最近做项目的时候,被要求做seo,由于项目已经开发完毕,且只需首页做seo,所以考虑再三,决定用prerender-spa-plugin结合vue-meta-info来实现首页的seo。
如果你的页面是动态的,比如通过v-for或v-if等来动态渲染的dom,则不适合此方法,可以考虑官方的SSR。
代码已更新到github,点击查看
言归正传,第一步:安装prerender-spa-plugin,vue-meta-info
npm install prerender-spa-plugin vue-meta-info --save
如果安装失败,使用淘宝镜像试试
cnpm install prerender-spa-plugin vue-meta-info --save
第二部:在你的项目目录下找到该文件 build/webpack.prod.conf.js,添加如下代码
const PrerenderSpaPlugin = require('prerender-spa-plugin')new PrerenderSpaPlugin(
//将渲染的文件放到dist目录下
path.join(__dirname, '../dist'),
//需要预渲染的路由信息
[ '/index','/about' ],
{
//在一定时间后再捕获页面信息,使得页面数据信息加载完成
captureAfterTime: 50000,
//忽略打包错误
ignoreJSErrors: true,
phantomOptions: '--web-security=false',
maxAttempts: 10,
},
)
至此,你可以打包试试,如果打包后的文件包含index和about两个文件,表明成功。
图片
但是运行打包的文件,右键查看网页源代码,你会发现,index和about这两个seo的文件信息是一样的,如果你也是这样的情况,别急,把你的路由模式换成"history"模式。
图片
重新打包,运行打包文件,查看源代码,发现内容不一样了,至此才算成功。
但是会出现一个隐形的问题,当你打包后的文件部署到线上时,刷新页面就会404了。这时需要后端配置一下,后端配置
vue-meta-info的具体使用看这里 vue-meta-info
以上是 浅谈vue单页面seo问题 的全部内容, 来源链接: utcz.com/z/378666.html