不使用ssr解决Vue单页SEO问题（二）
时间：2023-03-30 06:15:55
PHP
上一篇说vue单页解决了SEO的问题，但是用php预处理了meta标签，但是还是没有内容填充，所以对于内容抓取还是有点弱，但是从头解决了问题，然后可以更进一步预填内容。这里仍然使用php实现预填充内容。首先拉取php中需要填写的数据，修改list或者具体内容拉取数据部分$urlExp=explode('/',$_SERVER['REQUEST_URI']);if(count($urlExp)>2&&$urlExp[1]=='article'){//从文章页面提取内容$ret=@json_decode(http_Req('http://127.0.0.1/api/Blog/getsinglelist',['tuid'=>$urlExp[2]],'POST'),true);如果（$ret）{$valKeywords=$ret['info'][0]['tt'].','.$valKeywords;$valDescription=$ret['info'][0]['txt'].'-'.$valTitle.','.$valDescription;$valTitle=$ret['信息'][0]['tt'].'-'.$valTitle;$info=$ret['info'][0]['info'];$textData=@file_get_contents("你的文章路径")??$val说明；}else{$textData='无';}}if(!$textData){//列表页面拉取列表$ret=@json_decode(http_Req('http://127.0.0.1/api/Blog/getlist',['page'=>1,'type'=>0],'POST'),真);如果（$ret）{$textData='';foreach($ret['info']as$key=>$val){$textData.='标题:'.$val['tt'].'.';$textData.='描述：'.$val['txt'].'.';$textData.='创建时间：'.$val['ctime'].'.';$textData.='观看次数：'.$val['fl'].'.';然后在html部分输出相关内容在body下面放一个div，把他隐藏起来
这样爬虫就可以在不影响前端渲染优化的情况下抓取我们的内容。之前vue的构建是构建完成后修改html为php。在这里更改webpack的配置有点傻。好了，修改build/webpack.prod.confnewHtmlWebpackPlugin({filename:config.build.index,//这里改成index.phptemplate:'index.php',inject:true,minify:{removeComments:true,collapseWhitespace:true,removeAttributeQuotes:true//更多选项：//https://github.com/kangax/html-minifier#options-quick-reference},//通过CommonsChunkPlugin持续处理多个块所必需的chunksSortMode:'dependency'}),修改config/index.jsbuild:{//index.html模板//在此处更改为index.phpindex:path.resolve(__dirname,'../dist/index.php'),//路径assetsRoot:path.resolve(__dirname,'../dist'),assetsSubDirectory:'static',assetsPublicPath:'http://cdn.linkvall.cn/',productionSourceMap:true,devtool:'#source-map',productionGzip:false,productionGzipExtensions:['js','css'],bundleAnalyzerReport:true}这样，构建时的入口文件就变成了index.php，构建后页面的入口也是index.php。最终效果等爬虫更新后才能发现。最后还是用php来实现，主要是为了实现。比较简单，对我这种后端是PHP的人比较友好。如果使用node来监控端口，则需要额外的开销和额外的精力来维护。如果后端是纯node，当然还是用node好，或者直接配置一个SSR。关于首页渲染问题建议使用骨架屏
