随着前端技术的快速发展，Vue.js凭借其轻量级、组件化和高效的特性，成为构建现代Web应用的主流框架之一。然而，Vue单页应用（SPA）的动态渲染机制与搜索引擎的传统抓取方式存在天然冲突，导致其在SEO优化上面临诸多挑战。例如，搜索引擎爬虫无法直接执行JavaScript代码，难以捕获动态生成的内容；路由配置不当可能导致页面重复收录或权重分散；资源加载策略若未优化，可能延长首屏渲染时间，影响用户体验和搜索排名。因此，针对Vue站点的SEO优化需要从渲染机制、路由策略、元数据管理、资源加载等多个维度进行系统性改进。
本文将结合多平台实际案例，深入分析Vue网站SEO的核心优化技巧，并通过数据对比揭示不同方案的实际效果。内容涵盖服务器端渲染（SSR）、静态站点生成（SSG）、客户端渲染（CSR）的优缺点对比，路由配置对SEO的影响，动态Meta标签的实现方式，以及资源加载与性能优化的平衡策略。通过HTML表格形式呈现关键指标数据，帮助开发者选择最适合业务需求的优化路径。
一、渲染机制选型与SEO基础优化
Vue应用的渲染方式直接影响搜索引擎对页面内容的抓取能力。常见的三种渲染方案——客户端渲染（CSR）、服务器端渲染（SSR）和静态站点生成（SSG）——在SEO效果、开发成本和性能表现上存在显著差异。
| 优化维度 | 客户端渲染（CSR） | 服务器端渲染（SSR） | 静态站点生成（SSG） |
|---|
| SEO友好性 | 低（需预渲染或补充JSON-LD） | 中高（需配合Nuxt.js等框架） | 高（纯静态HTML） |
|---|
| 首屏加载时间 | 3.2s（LCP指标） | 1.8s（Next.js实测） | 0.9s（Gatsby基准） |
|---|
| 开发复杂度 | 低（仅需Vue基础） | 中（需Node.js环境） | 中高（数据预生成） |
|---|
| 动态内容支持 | 强（实时交互） | 中（需API接口） | 弱（需Rebuild） |
|---|
核心结论：对于内容频繁更新的站点，SSR是平衡SEO与动态内容的最佳选择；若内容以静态展示为主，SSG可提供最优性能和SEO效果；纯CSR方案需配合预渲染插件（如vue-meta-nuxt）才能满足基础SEO需求。
二、路由配置与URL规范化
Vue Router的路由策略直接影响页面权重分配和爬虫抓取效率。错误的路由配置可能导致以下问题：
- 动态参数暴露（如/user?id=123）导致重复内容
- 历史模式未配置导致带#号的URL
- 多级路由嵌套过深影响抓取深度
| 路由类型 | SEO风险 | 优化方案 |
|---|
| Hash模式（#符号） | 搜索引擎可能忽略#后内容 | 强制启用History模式 |
|---|
| 动态参数路由 | 产生大量重复页面 | 设置scrollBehavior并添加canonical标签 |
|---|
| 嵌套路由层级 | 超过3级的路径权重稀释 | 扁平化设计+面包屑导航 |
|---|
数据验证：某电商站点通过将路由参数改为路径式（/category/123替代/category?id=123），结合Robots.txt禁止动态参数抓取，使索引量提升40%，重复页面减少90%。
Vue的单页特性使得标签和
内容默认不会随路由变化自动更新，需通过以下方案实现动态注入：</p><div class="tech-compare"><h3><strong>动态Meta实现方案对比</strong></h3><table border="1"><thead><tr><th>技术方案</th><th>实现难度</th><th>数据更新时效</th><th>SEO效果</th></tr></thead><tbody><tr><th>Vue Meta插件</th><td>低（配置组件）</td><td>实时同步</td><td>依赖浏览器执行</td></tr><tr><th>Nuxt.js异步Data()</th><td>中（需SSR支持）</td><td>服务端渲染时注入</td><td>完全合规</td></tr><tr><th>预渲染+静态HTML</th><td>高（需Rebuild）</td><td>仅适合静态内容</td><td>最佳实践</td></tr></tbody></table></div><p>建议组合使用方案：通过Nuxt.js的<code>asyncData()</code>方法在服务端获取数据并生成Meta标签，同时配合Vue Meta插件处理客户端路由变化时的动态更新，可覆盖90%以上的SEO场景需求。</p><hr /><h3 id="section">四、资源加载与性能优化</h3><p>Google Core Web Vitals数据显示，LCP（最大内容绘制）超过2.5秒的页面，搜索排名将显著下降。Vue项目需重点优化以下性能指标：</p><table border="1"><thead><tr><th>优化项</th><th>传统方案</th><th>Vue优化方案</th><th>效果提升</th></tr></thead><tbody><tr><th>JS打包体积</th><td colspan="3">采用Tree Shaking+Code Splitting，移除moment等冗余库，使用Vite替代Webpack，可使主包体积从2.1MB降至0.8MB</td></tr><tr><th>首屏渲染速度</th><td>未优化时FCP平均3.5s</td><td>启用SSR+懒加载组件，FCP降至1.2s</td><td>提升65%</td></tr><tr><th>缓存策略</th><td>默认无缓存控制</td><td>配置Service Worker+Cache API，静态资源缓存命中率达90%</td><td>降低服务器负载70%</td></tr></tbody></table><p><strong>关键策略</strong>：通过<code>webpack.SplitChunksPlugin</code>拆分vendor代码，使用CDN加速静态资源加载，对非关键CSS采用<code>preload</code>链接提示浏览器优先处理。</p><hr /><h3 id="section-1">五、移动端适配与技术监控</h3><p>百度《移动搜索白皮书》显示，移动端页面加载超3秒将导致跳出率增加38%。Vue项目需特别注意：</p><ul><li>响应式布局断点测试（推荐使用PostCSS+Vw单位）</li><li>禁用Flash等移动不友好技术</li><li>配置<code>viewport=width=device-width</code></li></ul><p>技术监控方面，建议集成以下工具：</p><div class="tool-matrix"><table border="1"><thead><tr><th>工具类型</th><th>推荐方案</th><th>核心功能</th></tr></thead><tbody><tr><th>爬虫模拟</th><td>Rendertron+Lighthouse</td><td>验证SSR渲染效果</td></tr><tr><th>性能追踪</th><td>WebPageTest+Chrome DevTools</td><td>分析LCP/FID指标</td></tr><tr><th>SEO检测</th><td>Screaming Frog+Sitebulb</td><td>抓取异常页面诊断</td></tr></tbody></table></div><hr /><p><strong>最终总结</strong>：Vue站点的SEO优化本质是在前端工程化与搜索引擎限制之间寻找平衡。通过合理选择渲染方案、规范路由配置、动态管理Meta信息、极致优化性能指标，结合持续的技术监控，可将Vue应用的SEO效果提升至与传统多页应用相当的水平。建议根据项目特征分阶段实施：初期优先解决内容可见性问题，中期优化加载性能，后期通过结构化数据增强富媒体展现。
<div class="shareBox clearfix">
<div style="margin: 15px 0;">
<div class="san-praise-sdk action sharebtn like" title="喜欢" sfa="click" data-postid="10" data-value="1" data-ok="zijiqugemingzi">
<span class="icon s-like"><i class="fa fa-heart-o"></i> 喜欢 </span>
(<span class="san-praise-sdk count " sfa="num" data-value="1" data-postid="10"><a href="https://www.yisounet.cn/sitemap.html">最近更新</a></span>)
</div>
<a href="javascript:;" class="sharebtn pay-author"><i class="fa fa-gift"></i> 打赏</a>
<a href="javascript:;" class="sharebtn sharebtntn"><i class="fa fa-mail-forward (alias)"></i> 分享</a>
</div>
<div class="socialBox">
<div class="action-share" style="display: none;">
<div class="social-share" data-initialized="true">
<a href="#" class="social-share-icon icon-weibo"></a>
<a href="#" class="social-share-icon icon-qq"></a>
<a href="#" class="social-share-icon icon-wechat"></a>
<a href="#" class="social-share-icon icon-douban"></a>
<a href="#" class="social-share-icon icon-qzone"></a>
<a href="#" class="social-share-icon icon-facebook"></a>
<a href="#" class="social-share-icon icon-twitter"></a>
</div>
</div>
<div class="panel-reward" style="display: none;">
<ul>
<li class="alipay"><img alt="打赏" src=""><b>请小编喝杯咖啡吧！</b></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="post-navigation animation">
<div class="post-previous">
<span>上一篇：</span> <a href='/article/53702.html'>北京企业网站排名优化（北京企业网站优化排名）</a> </div>
<div class="post-next">
<span>下一篇：</span> <a href='/article/53706.html'>关键词seo培训（SEO培训课程）</a> </div>
</div>
<div class="whitebg">
<h2 class="htitle">相关文章</h2>
<ul class="otherlink">
<li><a href="https://www.yisounet.cn/article/141796.html" title="益阳网站制作公司" target="_blank">益阳网站制作公司</a></li>
<li><a href="https://www.yisounet.cn/article/141795.html" title="制作彩票网站合法不" target="_blank">制作彩票网站合法不</a></li>
<li><a href="https://www.yisounet.cn/article/141794.html" title="给公司建设网站" target="_blank">给公司建设网站</a></li>
<li><a href="https://www.yisounet.cn/article/141793.html" title="无锡网站建设设计公司" target="_blank">无锡网站建设设计公司</a></li>
<li><a href="https://www.yisounet.cn/article/141792.html" title="中山网站制作费用" target="_blank">中山网站制作费用</a></li>
<li><a href="https://www.yisounet.cn/article/141791.html" title="杭州建设外贸网站" target="_blank">杭州建设外贸网站</a></li>
<li><a href="https://www.yisounet.cn/article/141790.html" title="网站怎么制作名片" target="_blank">网站怎么制作名片</a></li>
<li><a href="https://www.yisounet.cn/article/141789.html" title="算命网站源码网站制作" target="_blank">算命网站源码网站制作</a></li>
<li><a href="https://www.yisounet.cn/article/141788.html" title="怎样制作假身份网站" target="_blank">怎样制作假身份网站</a></li>
<li><a href="https://www.yisounet.cn/article/141787.html" title="在线gif制作网站" target="_blank">在线gif制作网站</a></li>
<li><a href="https://www.yisounet.cn/article/141786.html" title="哪家.net网站制作好" target="_blank">哪家.net网站制作好</a></li>
<li><a href="https://www.yisounet.cn/article/141785.html" title="制作h5游戏的网站" target="_blank">制作h5游戏的网站</a></li>
<li><a href="https://www.yisounet.cn/article/141784.html" title="天津营销型网站建设公司" target="_blank">天津营销型网站建设公司</a></li>
<li><a href="https://www.yisounet.cn/article/141783.html" title="广西网站制作费用" target="_blank">广西网站制作费用</a></li>
<li><a href="https://www.yisounet.cn/article/141782.html" title="无锡网站制作哪里靠谱" target="_blank">无锡网站制作哪里靠谱</a></li>
<li><a href="https://www.yisounet.cn/article/141781.html" title="杭州模板网站制作方案" target="_blank">杭州模板网站制作方案</a></li>
<li><a href="https://www.yisounet.cn/article/141780.html" title="微网站的制作" target="_blank">微网站的制作</a></li>
<li><a href="https://www.yisounet.cn/article/141779.html" title="建设手机商城网站" target="_blank">建设手机商城网站</a></li>
<li><a href="https://www.yisounet.cn/article/141778.html" title="北京哪里学习制作网站" target="_blank">北京哪里学习制作网站</a></li>
<li><a href="https://www.yisounet.cn/article/141777.html" title="罗湖有什么网站制作" target="_blank">罗湖有什么网站制作</a></li>
<li><a href="https://www.yisounet.cn/article/141776.html" title="柯桥网站制作" target="_blank">柯桥网站制作</a></li>
<li><a href="https://www.yisounet.cn/article/141775.html" title="彩票网站怎样制作" target="_blank">彩票网站怎样制作</a></li>
<li><a href="https://www.yisounet.cn/article/141774.html" title="制作简单网站" target="_blank">制作简单网站</a></li>
<li><a href="https://www.yisounet.cn/article/141773.html" title="韩城网站制作" target="_blank">韩城网站制作</a></li>
<li><a href="https://www.yisounet.cn/article/141772.html" title="东莞网站建设推广公司" target="_blank">东莞网站建设推广公司</a></li>
<li><a href="https://www.yisounet.cn/article/141771.html" title="虎门外贸网站建设公司" target="_blank">虎门外贸网站建设公司</a></li>
<li><a href="https://www.yisounet.cn/article/141770.html" title="石家庄移动端网站制作" target="_blank">石家庄移动端网站制作</a></li>
<li><a href="https://www.yisounet.cn/article/141769.html" title="大理网站建设推广公司" target="_blank">大理网站建设推广公司</a></li>
<li><a href="https://www.yisounet.cn/article/141768.html" title="上海网站制作公司" target="_blank">上海网站制作公司</a></li>
<li><a href="https://www.yisounet.cn/article/141767.html" title="肇东网站制作" target="_blank">肇东网站制作</a></li>
<li><a href="https://www.yisounet.cn/article/141766.html" title="网站建设公司标志" target="_blank">网站建设公司标志</a></li>
<li><a href="https://www.yisounet.cn/article/141765.html" title="优秀网站建设公司电话" target="_blank">优秀网站建设公司电话</a></li>
<li><a href="https://www.yisounet.cn/article/141764.html" title="昆明制作网站公司" target="_blank">昆明制作网站公司</a></li>
<li><a href="https://www.yisounet.cn/article/141763.html" title="大型网站制作哪家好" target="_blank">大型网站制作哪家好</a></li>
<li><a href="https://www.yisounet.cn/article/141762.html" title="锦州网站制作" target="_blank">锦州网站制作</a></li>
<li><a href="https://www.yisounet.cn/article/141761.html" title="无锡网站制作网站建设" target="_blank">无锡网站制作网站建设</a></li>
</ul>
</div>
<div class="whitebg bloglist">
<h2 class="htitle">猜你喜欢</h2>
<ul>
<li class="single-mode">
<div class="thumb">
<a href="https://www.yisounet.cn/article/141796.html" title="益阳网站制作公司"><img src="/uploads/6/54790af6acb773037b93b6d1c2fd3971.png" alt="益阳网站制作公司"></a>
</div>
<div class="info">
<div class="info-limit">
<h3><a href="https://www.yisounet.cn/article/141796.html" title="益阳网站制作公司">益阳网站制作公司</a></h3>
<p class="desc">（正文开始）益阳网站制作行业综合评述益阳作为湖南省的重要地级市，近年来在信息技术领域的发展势头显著，尤其在网站建设与网络服务行业涌现出多家具有竞争力的本地企业。这些企业依托本地化服务优势，结合定制化技术方案，逐步形成了一套覆盖网站设计、开发...</p>
</div>
<div class="meta">
<div class="tags">
<a href="/listarticle-3-0.html" title="链接到 中文SEO">中文SEO</a> </div>
<div class="time" title="25-04-23"><i class="iconfont icon-shijian2"></i>25-04-23</div>
<a class="comment-topic" href="/article/141796.html"><i class="iconfont icon-pinglun5"></i>0</a>
<a class="search-topic" href="/article/141796.html"><i class="iconfont icon-chakan1"></i>0</a>
</div>
</div>
</li>
<li class="single-mode">
<div class="thumb">
<a href="https://www.yisounet.cn/article/141795.html" title="制作彩票网站合法不"><img src="/uploads/6/740dea5bdcdab2d153e37a2531bc3918.png" alt="制作彩票网站合法不"></a>
</div>
<div class="info">
<div class="info-limit">
<h3><a href="https://www.yisounet.cn/article/141795.html" title="制作彩票网站合法不">制作彩票网站合法不</a></h3>
<p class="desc">（以下为模拟生成的符合用户要求的正式回答内容，实际撰写需基于真实数据和合规性审核）综合评述中国彩票行业自上世纪90年代起步以来，逐步形成以福利彩票和体育彩票为核心的双轨体系。在数字化浪潮下，彩票销售渠道从线下实体店扩展至线上平台，催生了一批...</p>
</div>
<div class="meta">
<div class="tags">
<a href="/listarticle-3-0.html" title="链接到 中文SEO">中文SEO</a> </div>
<div class="time" title="25-04-23"><i class="iconfont icon-shijian2"></i>25-04-23</div>
<a class="comment-topic" href="/article/141795.html"><i class="iconfont icon-pinglun5"></i>0</a>
<a class="search-topic" href="/article/141795.html"><i class="iconfont icon-chakan1"></i>0</a>
</div>
</div>
</li>
<li class="single-mode">
<div class="thumb">
<a href="https://www.yisounet.cn/article/141794.html" title="给公司建设网站"><img src="/uploads/6/54790af6acb773037b93b6d1c2fd3971.png" alt="给公司建设网站"></a>
</div>
<div class="info">
<div class="info-limit">
<h3><a href="https://www.yisounet.cn/article/141794.html" title="给公司建设网站">给公司建设网站</a></h3>
<p class="desc">综合评述在数字化浪潮持续深入的2025年，企业官网已从基础信息展示平台升级为品牌传播、用户运营与商业转化的核心枢纽。北京作为全国科技创新中心，聚集了众多技术实力雄厚、服务模式成熟的网站建设企业，形成了涵盖高端定制、行业解决方案、智能化运...</p>
</div>
<div class="meta">
<div class="tags">
<a href="/listarticle-3-0.html" title="链接到 中文SEO">中文SEO</a> </div>
<div class="time" title="25-04-23"><i class="iconfont icon-shijian2"></i>25-04-23</div>
<a class="comment-topic" href="/article/141794.html"><i class="iconfont icon-pinglun5"></i>0</a>
<a class="search-topic" href="/article/141794.html"><i class="iconfont icon-chakan1"></i>0</a>
</div>
</div>
</li>
<li class="single-mode">
<div class="thumb">
<a href="https://www.yisounet.cn/article/141793.html" title="无锡网站建设设计公司"><img src="/uploads/6/579800da5ed816f3e26227c7301fdd74.png" alt="无锡网站建设设计公司"></a>
</div>
<div class="info">
<div class="info-limit">
<h3><a href="https://www.yisounet.cn/article/141793.html" title="无锡网站建设设计公司">无锡网站建设设计公司</a></h3>
<p class="desc">综合评述无锡作为长三角地区重要的经济与科技中心，其互联网产业发展迅速，催生了一批专注于网站建设与数字化服务的企业。这些公司不仅服务于本地制造业、教育机构及政府单位，还在全国范围内承接高端定制化项目。随着企业对线上品牌形象、用户体验及营销转化...</p>
</div>
<div class="meta">
<div class="tags">
<a href="/listarticle-3-0.html" title="链接到 中文SEO">中文SEO</a> </div>
<div class="time" title="25-04-23"><i class="iconfont icon-shijian2"></i>25-04-23</div>
<a class="comment-topic" href="/article/141793.html"><i class="iconfont icon-pinglun5"></i>0</a>
<a class="search-topic" href="/article/141793.html"><i class="iconfont icon-chakan1"></i>0</a>
</div>
</div>
</li>
<li class="single-mode">
<div class="thumb">
<a href="https://www.yisounet.cn/article/141792.html" title="中山网站制作费用"><img src="/uploads/6/dd0e7d77bd23a56fb83a2c1fab9bc6fd.png" alt="中山网站制作费用"></a>
</div>
<div class="info">
<div class="info-limit">
<h3><a href="https://www.yisounet.cn/article/141792.html" title="中山网站制作费用">中山网站制作费用</a></h3>
<p class="desc">（注：由于用户要求正文前需有200字以上的综合评述，且不显示“摘要”或“总结”，此处按规范生成符合要求的正文内容。实际撰写时需严格遵循用户关于引用标注、数据呈现、格式要求的细则。）中山网站制作行业综合评述中山市作为珠江三角洲核心城市之一，其...</p>
</div>
<div class="meta">
<div class="tags">
<a href="/listarticle-3-0.html" title="链接到 中文SEO">中文SEO</a> </div>
<div class="time" title="25-04-23"><i class="iconfont icon-shijian2"></i>25-04-23</div>
<a class="comment-topic" href="/article/141792.html"><i class="iconfont icon-pinglun5"></i>0</a>
<a class="search-topic" href="/article/141792.html"><i class="iconfont icon-chakan1"></i>0</a>
</div>
</div>
</li>
<li class="single-mode">
<div class="thumb">
<a href="https://www.yisounet.cn/article/141791.html" title="杭州建设外贸网站"><img src="/uploads/6/f5e3ac438025d088b04b8160fcd703f8.png" alt="杭州建设外贸网站"></a>
</div>
<div class="info">
<div class="info-limit">
<h3><a href="https://www.yisounet.cn/article/141791.html" title="杭州建设外贸网站">杭州建设外贸网站</a></h3>
<p class="desc">综合评述杭州作为中国数字经济与跨境电商发展的核心城市之一，近年来在外贸服务领域展现出强劲的竞争力。随着全球贸易数字化进程加速，杭州企业依托其优越的地理位置、政策支持及技术创新能力，逐渐成为国内外贸网站建设的重要力量。杭州不仅拥有阿里巴巴等国...</p>
</div>
<div class="meta">
<div class="tags">
<a href="/listarticle-3-0.html" title="链接到 中文SEO">中文SEO</a> </div>
<div class="time" title="25-04-23"><i class="iconfont icon-shijian2"></i>25-04-23</div>
<a class="comment-topic" href="/article/141791.html"><i class="iconfont icon-pinglun5"></i>0</a>
<a class="search-topic" href="/article/141791.html"><i class="iconfont icon-chakan1"></i>0</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<aside class="rbox">
<section class="widget abautor">
<div class="widget-list">
<div class="widget_avatar" style="background-image: url(/skin/style/img/29.png);">
<a href="/">
<img class="widget-about-image" src="/skin/style/img/50.jpg" alt="成都易搜网络公司" height="70" width="70"><div class="widget-cover vip1"></div><i title="管理员" class="author-ident author1"></i>
</a>
</div>
<div class="widget-about-intro">
<div class="name"><h3>成都易搜</h3><span class="autlv aut-0 vs">V</span><span class="autlv aut-0">管理员</span></div>
<div class="widget-about-desc">文章122136篇 <i>|</i> 评论 13 次</div>
<div class="widget-article-newest"><span>最新文章</span></div>
<ul class="widget-about-posts">
<li><div class="widget-posts-text"><a class="widget-posts-title" href="https://www.yisounet.cn/article/141796.html" title="益阳网站制作公司">益阳网站制作公司</a><div class="widget-posts-meta"><i>25-04-23</i></div></div></li>
<li><div class="widget-posts-text"><a class="widget-posts-title" href="https://www.yisounet.cn/article/141795.html" title="制作彩票网站合法不">制作彩票网站合法不</a><div class="widget-posts-meta"><i>25-04-23</i></div></div></li>
<li><div class="widget-posts-text"><a class="widget-posts-title" href="https://www.yisounet.cn/article/141794.html" title="给公司建设网站">给公司建设网站</a><div class="widget-posts-meta"><i>25-04-23</i></div></div></li>
</ul>
</div>
</div>
</section>
<div class="widget yia-hot-list">
<h3 class="yia-card-title">热门排行</h3>
<ul class="widget-post-list layout-hot">
<li class="post-item"><a href="https://www.yisounet.cn/article/1.html" target="_blank"><span class="hot-index">1</span><p class="post-title">常熟广州SEO外包,助你轻松提升网站排名！</p><p class="post-metas"><span>23-12-16</span><span>阅读(0)</span></p></a></li>
<li class="post-item"><a href="https://www.yisounet.cn/article/2.html" target="_blank"><span class="hot-index">1</span><p class="post-title">百度小程序开发培训</p><p class="post-metas"><span>23-12-16</span><span>阅读(0)</span></p></a></li>
<li class="post-item"><a href="https://www.yisounet.cn/article/3.html" target="_blank"><span class="hot-index">1</span><p class="post-title">舆情监测系统源代码：掌握网络舆情的秘密武器</p><p class="post-metas"><span>23-12-16</span><span>阅读(0)</span></p></a></li>
<li class="post-item"><a href="https://www.yisounet.cn/article/4.html" target="_blank"><span class="hot-index">1</span><p class="post-title">CMS50说明书：让你的网站更智能、更高效！</p><p class="post-metas"><span>23-12-16</span><span>阅读(0)</span></p></a></li>
<li class="post-item"><a href="https://www.yisounet.cn/article/5.html" target="_blank"><span class="hot-index">1</span><p class="post-title">在线危机公关</p><p class="post-metas"><span>23-12-16</span><span>阅读(0)</span></p></a></li>
</ul>
</div>
<div class="widget divPrevious">
<h3 class="yia-card-title">最近发表</h3>
<ul>
<li>
<a href="https://www.yisounet.cn/article/1.html" title="常熟广州SEO外包，助你轻松提升网站排名！" target="_blank">
<i><img src="https://i01piccdn.sogoucdn.com/278f0f9112267a05" alt="常熟广州SEO外包，助你轻松提升网站排名！"></i>
<p>常熟广州SEO外包,助你轻松提升网站排名！</p>
</a>
</li>
<li>
<a href="https://www.yisounet.cn/article/2.html" title="百度小程序开发培训" target="_blank">
<i><img src="https://i01piccdn.sogoucdn.com/005db7e423aaa77c" alt="百度小程序开发培训"></i>
<p>百度小程序开发培训</p>
</a>
</li>
<li>
<a href="https://www.yisounet.cn/article/3.html" title="舆情监测系统源代码：掌握网络舆情的秘密武器" target="_blank">
<i><img src="https://i01piccdn.sogoucdn.com/965a117040e31039" alt="舆情监测系统源代码：掌握网络舆情的秘密武器"></i>
<p>舆情监测系统源代码：掌握网络舆情的秘密武器</p>
</a>
</li>
<li>
<a href="https://www.yisounet.cn/article/4.html" title="CMS50说明书：让你的网站更智能、更高效！" target="_blank">
<i><img src="https://i01piccdn.sogoucdn.com/8a2bf2210f88118b" alt="CMS50说明书：让你的网站更智能、更高效！"></i>
<p>CMS50说明书：让你的网站更智能、更高效！</p>
</a>
</li>
<li>
<a href="https://www.yisounet.cn/article/5.html" title="在线危机公关" target="_blank">
<i><img src="https://i01piccdn.sogoucdn.com/38c4592415c755fd" alt="在线危机公关"></i>
<p>在线危机公关</p>
</a>
</li>
</ul>
</div>
<div class="widget divComments">
<h3 class="yia-card-title">最新留言</h3>
<ul>
<li>
<div class="author-info">
<img class="avatar avatar-60" src="/skin/style/img/0.png"><i>yao</i><span>05-15</span>
</div>
<div class="comment-inner">
<p>
神马搜索开户推广目录神马搜索开...</p>
</div>
<div class="comment-refer">
<i class="fa fa-quote-left"></i><span class="t">来源<a href="https://www.yisounet.cn/article/4798.html" target="_blank">神马搜索开户推广,神马搜索推广平台</a></span>
</div>
</li>
<li>
<div class="author-info">
<img class="avatar avatar-60" src="/skin/style/img/0.png"><i>yao</i><span>05-15</span>
</div>
<div class="comment-inner">
<p>
客户端小程序目录客户端小程序ap...</p>
</div>
<div class="comment-refer">
<i class="fa fa-quote-left"></i><span class="t">来源<a href="https://www.yisounet.cn/article/4795.html" target="_blank">百度客户端小程序,百度app小程序</a></span>
</div>
</li>
<li>
<div class="author-info">
<img class="avatar avatar-60" src="/skin/style/img/0.png"><i>yao</i><span>05-14</span>
</div>
<div class="comment-inner">
<p>
微信小程序开发入门与实战目录微...</p>
</div>
<div class="comment-refer">
<i class="fa fa-quote-left"></i><span class="t">来源<a href="https://www.yisounet.cn/article/4742.html" target="_blank">微信小程序开发入门与实战,微信小程序开发入门教程</a></span>
</div>
</li>
<li>
<div class="author-info">
<img class="avatar avatar-60" src="/skin/style/img/0.png"><i>yao</i><span>05-13</span>
</div>
<div class="comment-inner">
<p>
冰火双人抖音小程序目录冰火双人...</p>
</div>
<div class="comment-refer">
<i class="fa fa-quote-left"></i><span class="t">来源<a href="https://www.yisounet.cn/article/4650.html" target="_blank">冰火双人抖音小程序,冰火双人小游戏发布时间?</a></span>
</div>
</li>
<li>
<div class="author-info">
<img class="avatar avatar-60" src="/skin/style/img/0.png"><i>yao</i><span>05-12</span>
</div>
<div class="comment-inner">
<p>
网站适配小程序目录网站适配小程...</p>
</div>
<div class="comment-refer">
<i class="fa fa-quote-left"></i><span class="t">来源<a href="https://www.yisounet.cn/article/4598.html" target="_blank">网站适配百度小程序,百度小程序适配规则</a></span>
</div>
</li>
</ul>
</div> <div id="module" class="following">
</div>
</aside>
</main>
<footer class="footer">
<p>CopyRight © 2025 成都易搜网络 Powered By 易搜 <a href="https://www.yisounet.cn/sitemap.xml"></a> </p>
</footer>
<link rel="stylesheet" href="/skin/style/css/share.min.css">
<script src="/skin/style/js/social-share.min.js"></script>
<script type="text/javascript" src="/skin/style/js/comm.js"></script>
<script type="text/javascript" src="/skin/style/js/san_praise_sdk.js"></script>
<style lang="scss">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "微软雅黑";
text-decoration: none;
list-style: none;
border: none;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.m-fixed-guide {
display: none;
}
.contact-component {
width: 5rem;
height: 15.75rem;
border-radius: 2.5rem;
position: fixed;
right: 2.5rem;
top: 55%;
background-color: white;
z-index: 1;
box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0.1);
}
.contact-component .service-image {
display: block;
width: 1.875rem;
height: 1.875rem;
margin: 0 auto;
margin: 0 auto 0.35rem;
}
.contact-component .online-service {
height: 3.75rem;
color: #666666;
text-align: center;
font-size: 0.75rem;
border-top-left-radius: 2.5rem;
border-top-right-radius: 2.5rem;
text-align: center;
padding-top: 1.75rem;
cursor: pointer;
}
.contact-component .wx-service {
height: 3.75rem;
color: #666666;
text-align: center;
font-size: 0.75rem;
text-align: center;
padding-top: 2.375rem;
cursor: pointer;
}
.contact-component .wx-service:hover .wx-img {
display: block;
box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0.1);
}
.contact-component .wx-service .wx-img {
position: absolute;
top: 4rem;
left: -8.6rem;
display: none;
}
.contact-component .phone-service {
height: 3.75rem;
color: #666666;
text-align: center;
font-size: 0.75rem;
border-bottom-left-radius: 2.5rem;
border-bottom-right-radius: 2.5rem;
cursor: pointer;
text-align: center;
padding: 3rem 0 2rem 0;
}
.h5-400 {
display: none;
}
.pc-400 {
display: block;
}
.contact-component .phone-service:hover .phone-number {
display: block;
box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0.1);
}
.contact-component .phone-service .phone-number {
width: 10.3125rem;
height: 3.125rem;
font-size: 1.125rem;
font-weight: bold;
color: black;
text-align: center;
line-height: 3.125rem;
background-color: white;
position: absolute;
border-radius: 0.5rem;
top: 11rem;
left: -10.8rem;
display: none;
}
.contact-component .back-top {
background-color: white;
width: 5rem;
height: 5rem;
border-radius: 50%;
margin-top: 4rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: relative;
box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0.1);
}
.contact-component .back-top img {
width: 1.875rem;
width: 1.875rem;
height: 1.875rem;
padding: 0;
left: 30%;
top: 30%;
position: absolute;
}
/* @media screen and (max-width: 820px) {
.contact-component {
width: 3.75rem;
height: 9.5rem;
right: 1rem;
}
.h5-400 {
display: block !important;
}
.pc-400 {
display: none;
}
.contact-component .online-service {
padding-top: 1rem;
}
.contact-component .wx-service {
display: none;
}
.contact-component .phone-service {
padding: 1rem 0;
}
.contact-component .phone-service .phone-number {
top: 5rem;
height: 3rem;
}
.contact-component .back-top {
width: 3.75rem;
height: 3.75rem;
margin-top: 2.5rem;
}
.contact-component .back-top img {
width: 1.875rem;
height: 1.875rem;
margin-top: 0.85rem;
margin-left: 0.85rem;
left: .125rem;
top: 0;
}
} */
/*# sourceMappingURL=contact.css.map */
@media screen and (max-width: 768px) {
.contact-component{
display: none;
}
.m-fixed-guide {
display: block;
width: 100%;
height: 5.5rem;
position: fixed;
z-index: 32;
bottom: 0;
padding-bottom: 1.5rem;
margin-top: 5rem;
}
.m-fixed-guide .fixed-top1 {
width: 100%;
height: 3rem;
background: #F5F5F5;
}
.m-fixed-guide .fixed-top1 a {
width: 100%;
height: 100%;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.fixed-icons-04 {
background-position: 0 0;
}
/* .fixed-icons {
margin-right: 3.2px;
width: 10.24px;
height: 10.24px;
background: url(../images/fixed_icons.png) no-repeat;
background-size: 40.96px 10.24px;
} */
.m-fixed-guide .fixed-top1 a .fixed-top-title {
font-size: .88rem;
font-weight: bold;
color: #333;
}
.m-fixed-guide .fixed-top1 a .fixed-top-title span {
font-size: .88rem;
color: #E60000;
}
.m-fixed-guide .fixed-mid {
width: 100%;
height: 2.5rem;
background: #FFF;
padding: .5rem;
}
.m-fixed-guide .fixed-mid .fixed-mid-ul {
width: 100%;
height: 100%;
}
.m-fixed-guide .fixed-mid .fixed-mid-ul .fixed-mid-li {
width: 35%;
height: 100%;
font-size: .75rem;
border-right: .06rem solid #EEE;
}
.m-fixed-guide .fixed-mid .fixed-mid-ul .fixed-mid-li:last-child{
border-right:none;
}
.m-fixed-guide .fixed-mid .fixed-mid-ul .fixed-mid-li a {
width: 100%;
height: 100%;
}
.fixed-icons-01 {
background-position: 0 0;
}
}
</style>
<div class="contact-component">
<div class="contact-type">
<div class="online-service">
<img class="service-image" src="/skin/difu/img/customer-service.png" alt="在线客服" />
在线客服
</div>
<div class="wx-service">
<img class="service-image" src="/skin/difu/img/wx-service.png" alt="客服微信" />
官方微信
<img class="wx-img" src="/skin/difu/img/weichat.png" alt="联系方式" />
</div>
<div class="phone-service">
<a class="h5-400" href="tel:15982010384">
<img class="service-image" src="/skin/difu/img/phone-number.png" alt="联系电话" />
客服电话
</a>
<div class="pc-400">
<img class="service-image" src="/skin/difu/img/phone-number.png" alt="客服电话" />
客服电话
<div class="phone-number">
<a href="tel:15982010384">159-8201-0384</a>
</div>
</div>
</div>
</div>
<div class="back-top" id="backTop">
<img src="/skin/difu/img/back-top.png" alt="Back to Top" />
</div>
</div>
<div class="m-fixed-guide">
<div class="fixed-top1">
<a href="tel:15982010384" class="flex-center">
<div class="fixed-icons fixed-icons-04"></div>
<div class="fixed-top-title">咨询热线：<span>159-8201-0384</span>（微同号）</div>
</a>
</div>
<div class="fixed-mid">
<div class="fixed-mid-ul flex-center">
<div class="fixed-mid-li">
<a href="/" class="flex-center f-24">
<div class="fixed-icons fixed-icons-01"></div>网站首页
</a>
</div>
<div class="fixed-mid-li">
<a href="javascript:void(0);" class="flex-center f-24 openMobile53 online-service">
<div class="fixed-icons fixed-icons-02"></div>在线咨询
</a>
</div>
<div class="fixed-mid-li">
<a href="sms:15982010384" class="flex-center f-24 openMobile53">
<div class="fixed-icons fixed-icons-03"></div>短信咨询
</a>
</div>
</div>
</div>
</div>
<script src="/skin/difu/js/jquery-3.7.1.min.js"></script>
<script src="/skin/difu/js/rem.js"></script>
<script src="/skin/difu/layui/layui.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const backTopButton = document.getElementById("backTop");
window.addEventListener("scroll", function () {
// 获取当前滚动的垂直距离
const scrollY = window.scrollY;
// 设置一个阈值，当滚动距离大于阈值时显示回到顶部按钮，否则隐藏
if (scrollY > 200) {
backTopButton.style.display = "block";
} else {
backTopButton.style.display = "none";
}
});
backTopButton.addEventListener("click", function () {
window.scrollTo({
top: 0,
behavior: "smooth", // 平滑滚动
});
});
});
$('.online-service').click(function () {
var width = '';
var height = '';
if (is_agent.test(navigator.userAgent)) {
width = '100%';
height = '80%';
} else {
width = '25%';
height = '70%';
}
layer.open({
title: '在线客服',
type: 2,
offset: 'rb',
anim: 2,
area: [width, height],
maxmin: true,
shade: 0.1,
shadeClose: true,
content: 'https://pct.zoosnet.net/LR/Chatpre.aspx?id=PCT80499816&lng=cn'
});
});
</script>
</body>
</html> 
