一、该问题的重现步骤是什么？
我们现在系统需要做SEO，要抓取到静态页面，现在都是SPA壳
二、你期待的结果是什么？实际看到的又是什么？
我们希望实现页面尽量是静态页，方便抓取，Title、Keywords、Description、内容，而不是SPA壳。
对于不同的路由（例如首页、产品页、文章页），查看源代码时显示的 Title、Keywords、Description 以及主体内容完全一样，都只是一个空的入口框架。
搜索引擎爬虫抓取页面时，获取到的是这个空壳，无法解析到任何有意义的文本内容或区别化的 SEO 标签。
我们希望实现以下目标：
“查看网页源代码”时，能直接看到每个页面完整的静态 HTML 结构，包括：
每个页面独立的 标签<br/></span><span style="text-wrap-mode: nowrap;">每个页面独立的 <meta name="keywords"> 和 <meta name="description"></span></p><p style="white-space: normal;"><span style="text-wrap-mode: nowrap;">每个页面主要的文本内容（非 JavaScript 动态渲染生成）</span></p><p style="white-space: normal;"><span style="text-wrap-mode: nowrap;">搜索引擎爬虫无需执行 JavaScript 即可抓取到这些信息，从而提升网站的收录率、索引质量及关键词排名。</span></p><p style="white-space: normal;"><span style="text-wrap-mode: nowrap;">简单来说：源代码所见即所得，与浏览器渲染后的内容在语义上保持一致，而不是只有 <div id="app"></div> 的 SPA 壳。</span></p><p style="white-space: normal;"><br/></p><p style="white-space: normal;"><span style="color: rgb(136, 18, 128); font-family: monospace; font-size: medium; white-space: pre;"><span style="font-size: 19px; font-family: 仿宋; color: rgb(0, 0, 0);"><img src="https://sns.bladex.cn/data/ueditor/php/upload/image/20260603/1780475018672920.png" title="1780475018672920.png" alt="6ae08ea9-bf1c-45a8-a215-211f0b0a3182.png"/></span></span></p><p><br/></p>
</div>
</div>
<div class="fly-panel detail-box" id="flyReply">
<fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
<legend>1条回答</legend> </fieldset>
<ul class="jieda" id="jieda">
<li data-id="111" class="jieda-daan">
<a name="item-1111111111"></a>
<div class="detail-about detail-about-reply">
<a class="fly-avatar" href="">
<img src="https://sns.bladex.cn/data/avatar/000/00/00/small_000000001.png" alt=" admin ">
</a>
<div class="fly-detail-user">
<a href="" class="fly-link">
<cite> admin</cite>
<i class="iconfont icon-renzheng" title="认证信息：XXX"></i>
</a>
<span>(楼主)</span>
</div> <div class="detail-hits">
<span>11小时前</span>
</div>
</div>
<div class="detail-body jieda-body photos">
<p> <p>vue官网也是一样，如果要实现你们这种需求，需要全部推倒重来，用原生html+js+轻量级ui组件库来实现。</p><p><img src="/data/ueditor/php/upload/image/20260603/1780476427377418.png" title="1780476427377418.png" alt="CleanShot20260603164622@2x.png"/></p></p>
<div class="appendcontent">
</div>
</div>
<div class="jieda-reply">
<span class="jieda-zan button_agree" type="zan" data-id='18596'>
<i class="iconfont icon-zan"></i>
<em>0</em>
</span>
<span type="reply" class="showpinglun" data-id="18596">
<i class="iconfont icon-svgmoban53"></i>
讨论(0)
</span>
<div class="jieda-admin">
</div>
</div>
<div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_18596">
<div class="areabox clearfix">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label>
<div class="layui-input-block" style="margin-left:90px;">
<input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" />
<input type='hidden' value='0' name='replyauthor' />
</div>
<div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="18596">提交评论 </span></div>
</div>
</form>
</div>
<hr>
<ul class="my-comments-list nav">
<li class="loading">
<img src='https://sns.bladex.cn/static/css/default/loading.gif' align='absmiddle' />
加载中...
</li>
</ul>
</div>
</li>
</ul>
<div class="layui-form layui-form-pane">
<form id="huidaform" name="answerForm" method="post">
<div class="layui-form-item layui-form-text">
<a name="comment"></a>
<div class="layui-input-block">
<script src="https://sns.bladex.cn/static/js/neweditor/ueditor.config.js" type="text/javascript"></script>
<script src="https://sns.bladex.cn/static/js/neweditor/ueditor.all.js" type="text/javascript"></script>
<script type="text/plain" id="editor" name="content" style="width:100%;height:200px;"></script>
<script type="text/javascript">
var isueditor=1;
var editor = UE.getEditor('editor',{
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[['fullscreen', '|', 'undo', 'redo', '|', 'bold' ,'removeformat', 'formatmatch', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', '|', 'simpleupload', 'insertimage', 'attachment', 'scrawl', '|', 'insertcode']],
initialContent:'',
//关闭字数统计
wordCount:false,
zIndex:2,
//关闭elementPath
elementPathEnabled:false,
//默认的编辑区域高度
initialFrameHeight:250
//更多其他参数，请参考ueditor.config.js中的配置项
//更多其他参数，请参考ueditor.config.js中的配置项
});
editor.ready(function() {
editor.setDisabled();
});
</script> </div>
</div>
<div class="layui-form-item">
<label for="L_vercode" class="layui-form-label">验证码</label>
<div class="layui-input-inline">
<input type="text" id="code" name="code" onkeydown="if(event.keyCode==13){event.keyCode=0;return false} " value="" required lay-verify="required" placeholder="图片验证码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">
<span style="color: #c00;"><img class="hand" src="https://sns.bladex.cn/user/code.html" onclick="javascript:updatecode();" id="verifycode"><a class="changecode" href="javascript:updatecode();"> 看不清?</a></span>
</div>
</div>
<div class="layui-form-item">
<input type="hidden" value="16607" id="ans_qid" name="qid">
<input type="hidden" id="tokenkey" name="tokenkey" value=''/>
<input type="hidden" value="SPA 页面无法轻易被搜索引擎抓取到内容" id="ans_title" name="title">
<div class="layui-btn layui-btn-disabled" id="ajaxsubmitasnwer" >提交回复</div>
</div>
</form>
</div>
</div>
<input type="hidden" value="16607" id="adopt_qid" name="qid" />
<input type="hidden" id="adopt_answer" value="0" name="aid" />
</div>
<div class="layui-col-md4">
<!-- 热门讨论问题 -->
<dl class="fly-panel fly-list-one">
<dt class="fly-panel-title">热议问题</dt>
<!-- 本周热门讨论问题显示10条-->
<dd>
<a href="https://sns.bladex.cn/q-16607.html">SPA 页面无法轻易被搜索引擎抓取到内容</a>
<span style="float:right"><i class="iconfont icon-pinglun1"></i> 1</span>
</dd>
<dd>
<a href="https://sns.bladex.cn/q-16606.html">租户新增与编辑异常</a>
<span style="float:right"><i class="iconfont icon-pinglun1"></i> 1</span>
</dd>
<dd>
<a href="https://sns.bladex.cn/q-16605.html">Saber3什么时候能升级到最新的3.9.0啊，还是说没有升级计划</a>
<span style="float:right"><i class="iconfont icon-pinglun1"></i> 1</span>
</dd>
<dd>
<a href="https://sns.bladex.cn/q-16604.html">定时任务上传文件到minio</a>
<span style="float:right"><i class="iconfont icon-pinglun1"></i> 1</span>
</dd>
<dd>
<a href="https://sns.bladex.cn/q-16603.html">同步所用maven项目报错</a>
<span style="float:right"><i class="iconfont icon-pinglun1"></i> 2</span>
</dd>
<dd>
<a href="https://sns.bladex.cn/q-16602.html">@Cacheable加入的缓存会有两级空目录，如何删除？</a>
<span style="float:right"><i class="iconfont icon-pinglun1"></i> 1</span>
</dd>
<dd>
<a href="https://sns.bladex.cn/q-16601.html">获取token 接口一直报400错误</a>
<span style="float:right"><i class="iconfont icon-pinglun1"></i> 2</span>
</dd>
<dd>
<a href="https://sns.bladex.cn/q-16600.html">最新版本（4.9）中，如何支持扫码登录？</a>
<span style="float:right"><i class="iconfont icon-pinglun1"></i> 1</span>
</dd>
<dd>
<a href="https://sns.bladex.cn/q-16599.html">定时任务上传minio文件报错</a>
<span style="float:right"><i class="iconfont icon-pinglun1"></i> 1</span>
</dd>
<dd>
<a href="https://sns.bladex.cn/q-16598.html">AI平台缺少数据标注功能</a>
<span style="float:right"><i class="iconfont icon-pinglun1"></i> 1</span>
</dd>
</dl> <!-- 右侧广告位 -->
<div class="fly-panel">
<div class="fly-panel-title">
官方产品
</div>
<div class="fly-panel-main"><a href="https://bladex.vip/#/" target="_blank" class="fly-zanzhu" time-limit="2017.09.25-2099.01.01" style="background-color: #20222A; background-image: linear-gradient(to right,#20222A,#3E4251);">BladeX 企业级开发平台</a>
<a href="https://data.bladex.cn" target="_blank" class="fly-zanzhu" time-limit="2017.09.25-2099.01.01" style="background-color: #009688; background-image: linear-gradient(to right,#009688,#5FB878);">BladeX 可视化数据大屏</a>
</div>
</div><div class="fly-panel">
<div class="fly-panel-title">
官方新品
</div>
<div class="fly-panel-main"> <a href="https://ai.bladex.cn/" target="_blank" class="fly-zanzhu" time-limit="2017.09.25-2099.01.01" style="background-color: #ff6a00; background-image: linear-gradient(to right,#161c23,#6f70ff);">BladeX 大模型开发平台</a>
<a href="https://iot.bladex.cn/" target="_blank" class="fly-zanzhu" time-limit="2017.09.25-2099.01.01" style="background-color: #ff6a00; background-image: linear-gradient(to right,#0076ff,#d094e8);">BladeX 物联网开发平台</a>
</div>
</div> <!-- 右侧微信二维码 -->
<div class="fly-panel" style="padding: 20px 0; text-align: center;">
<img src="https://sns.bladex.cn/data/attach/logo/wxlogo.png" style="max-width: 100%;width:80%;margin:0 auto;" alt="layui">
<p style="position: relative; color: #666;">扫一扫访问 Blade技术社区 移动端</p>
</div> </div>
</div>
</div>
<script type="text/javascript">var needcode=1;
</script>
<!-- 公共底部 -->
<div class="fly-footer">
<p> <a href="https://sns.bladex.cn/" target="_blank">Blade技术社区</a> 2026 © <a href="https://bladex.cn" target="_blank">上海布雷德科技有限公司</a>
<a href="https://beian.miit.gov.cn" target="_blank" >沪ICP备2023009528号-1</a>
<a href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32041102000998" target="_blank" ><img src="/static/images/gongan.png"/> 苏公网安备 32041102000998号</a> </p>
</div><div class="layui-hide-md">
<style>
.ui-footer-btn .ui-tiled .current, .ui-footer-btn .ui-tiled i.current {
color:#0085ee;
}
.ui-footer li i{
font-size: 20px;
color: #333333;
}
.ui-footer li h6{
font-size: 13px;
}
.ui-footer-btn .ui-tiled .current, .ui-footer-btn .ui-tiled i.current {
color:#0085ee;
}
#footer{
margin-bottom: 50px;
}
.ui-footer-btn .ui-tiled {
height: 100%;
}
.ui-flex, .ui-tiled {
display: -webkit-box;
width: 100%;
-webkit-box-sizing: border-box;
}
.ui-footer {
z-index: 1;
}
.ui-footer-btn {
background: #fff;
color: #777;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
}
.ui-footer {
bottom: 0;
height: 56px;
}
.ui-tiled li {
-webkit-box-flex: 1;
width: 100%;
text-align: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.ui-footer-btn .ui-tiled .current, .ui-footer-btn .ui-tiled i.current {
color: #0085ee;
}
.layui-fixbar {
position: fixed;
right: 15px;
bottom: 65px;
z-index: 999999;
}
.site-tree-mobile {
bottom: 65px !important;
}
@media screen and (-webkit-min-device-pixel-ratio: 2)
.ui-border-t, .ui-border-b, .ui-border-tb {
background-repeat: repeat-x;
-webkit-background-size: 100% 1px;
}
@media screen and (-webkit-min-device-pixel-ratio: 2)
.ui-border-t {
background-position: left top;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#e0e0e0),to(#e0e0e0));
}
@media screen and (-webkit-min-device-pixel-ratio: 2)
.ui-border-t, .ui-border-b, .ui-border-l, .ui-border-r, .ui-border-tb {
border: 0;
}
</style>
<footer class="ui-footer ui-footer-btn ">
<ul class="ui-tiled ui-border-t">
<li class="">
<a href="https://sns.bladex.cn/" class="">
<i class="layui-icon layui-icon-home " style="line-height: 34px;"></i>
<div class="ui-txt-muted "><h6>首页</h6></div>
</a>
</li>
<li>
<a href="https://sns.bladex.cn/ask">
<i class="layui-icon layui-icon-log " style="line-height: 34px;"></i>
<div class="ui-txt-muted "><h6>问答</h6></div>
</a>
</li>
<li>
<a href="https://sns.bladex.cn/article">
<i class="layui-icon layui-icon-list " style="line-height: 34px;"></i>
<div class="ui-txt-muted "><h6>文章</h6></div>
</a>
</li>
<li >
<a href="https://sns.bladex.cn/question/add.html">
<i class="layui-icon layui-icon-edit " style="line-height: 34px;"></i>
<div class="myaddquestion ui-txt-muted "><h6>提问</h6></div>
</a>
</li>
<li>
<a href="https://sns.bladex.cn/expert/index.html">
<i class="layui-icon layui-icon-user " style="line-height: 34px;"></i>
<div class="ui-txt-muted "><h6>专家</h6></div>
</a>
</li>
<li>
<a href="https://sns.bladex.cn/user/login.html" >
<i class="layui-icon layui-icon-friends " style="line-height: 34px;"></i>
<div class="ui-txt-muted "><h6>我的</h6></div>
</a>
</li>
</ul>
</footer></div>
<script>
layui.use(['jquery', 'layer'], function(){
var $ = layui.$ //重点处
,layer = layui.layer;
var tips;
$(".link-tips").hover(function () {
tips = layer.tips($(this).attr("title"), $(this),{
tips: [1, '#555555']
// 上右下左四个方向，通过1-4进行方向设定
});
},function(){
layer.close(tips);
}); $("a").attr("target","_self");
$(".lazy").each(function(){
$(this).attr("src",$(this).attr("data-original"))
})
});
</script>
<script>
layui.cache.page = 'user';
layui.cache.user = {
username: '游客'
,uid: -1 ,avatar: 'https://sns.bladex.cn//static/css/default/avatar.gif'
,experience: 83
,sex: '男'
};
layui.config({
version: "3.0.0"
,base: 'https://sns.bladex.cn/static/responsive_fly/res/mods/'
}).extend({
fly: 'index'
}).use('fly');
</script>
</body>
</html>
