1. 项目概述
本项目是民意达软件有限公司的官方网站，旨在展示公司的专业服务和产品，为客户提供便捷的咨询渠道。网站采用现代化的响应式设计，支持桌面端和移动端访问。
2. 技术栈
| 分类 |
技术 |
版本 |
| 前端框架 |
Vue.js |
3.x |
| 构建工具 |
Vite |
5.x |
| CSS框架 |
Tailwind CSS |
3.x |
| 路由 |
Vue Router |
4.x |
| 静态站点生成 |
Vite SSG（SSR 预渲染） |
28.x |
| SEO Head 管理 |
@unhead/vue（TDK / OG / JSON-LD） |
2.x |
| 图标库 |
Lucide Vue Next |
latest |
| 语言 |
JavaScript (ES6+) |
- |
3. 项目结构
├── public/ # 原样拷贝的静态资源
│ ├── logo-top.png # 公司Logo
│ ├── wechat-contact.jpg # 微信二维码
│ ├── robots.txt # 搜索引擎抓取规则（含 Sitemap 声明）
│ ├── 404.html # 静态404页面
│ └── tech-doc.html # 本技术文档
├── src/
│ ├── components/ # 通用组件（导航、页脚、面包屑、FAQ手风琴等）
│ │ └── home/ # 首页分区组件（Hero、能力、软件类型、行业、流程、优势等）
│ ├── views/ # 页面视图：首页、两个服务详情、资讯列表、文章详情、404
│ ├── router/routes.js # 路由表（含动态文章路由）
│ ├── composables/useSeo.js # 统一SEO组合式函数（TDK/OG/canonical/JSON-LD）
│ ├── data/ # 集中数据源（站点信息、服务、FAQ、文章，便于扩展英文）
│ ├── App.vue # 根组件（导航 + RouterView + 页脚 + 返回顶部）
│ ├── main.js # ViteSSG 入口（服务端预渲染 / 客户端水合）
│ └── style.css # 全局样式与文章排版
├── index.html # HTML模板（站点级 TDK 与 JSON-LD）
├── vite.config.js # Vite配置 + SSG配置 + 构建时生成 sitemap.xml
├── tailwind.config.js # Tailwind配置
└── package.json # 项目依赖配置（build: vite-ssg build）
4. 页面与功能模块
4.1 首页（/）
- 定位Hero区：企业管理软件定制 + 小程序/APP开发两大业务，电话与微信直连入口
- 软件类型大全：CRM、ERP、进销存、WMS、MES、OA、HRM、财务、项目管理等16类系统
- 成熟产品、服务行业（12大行业）、合作流程、六大优势、常见问题FAQ、资讯精选与联系区
- 首页注入 ProfessionalService 与 WebSite 结构化数据（JSON-LD）
4.2 企业管理软件定制页（/services/enterprise-software）
- 定制价值痛点、16类系统网格、系统对接能力、常见问题FAQ
- 独立 TDK、面包屑 BreadcrumbList、Service 与 FAQPage 结构化数据
4.3 小程序与APP开发页（/services/miniprogram-app）
- 微信/支付宝小程序、APP、H5 的适用场景、服务范围、发布支持与FAQ
- 独立 TDK、面包屑、Service 与 FAQPage 结构化数据
4.4 资讯模块（/news/ 与 /news/:slug）
- 资讯列表页（Blog 结构化数据）与文章详情页（Article 结构化数据、独立TDK、面包屑）
- 文章以数据文件管理，构建时自动预渲染为静态页面并写入 sitemap.xml
4.5 全局功能
- 固定顶部导航、移动端汉堡菜单、返回顶部、页内锚点平滑定位
- 404页面：静态 /404.html（服务器兜底）+ 客户端路由通配页（站内导航兜底）
5. SEO 与部署说明
5.1 搜索引擎优化（SEO）实现
- SSG 预渲染：每个路由构建时生成完整静态 HTML，百度/谷歌无需执行 JS 即可抓取全部中文内容
- TDK 独立：每页独立 title、description、keywords，canonical 统一指向正式域名 https://www.minyida.cn
- 结构化数据：ProfessionalService（含地址、联系点、营业时间、服务目录）、WebSite、Service、FAQPage、Article、BreadcrumbList 等 JSON-LD
- sitemap.xml：构建时根据页面与文章自动生成（11 个 URL）；robots.txt 声明抓取规则与 Sitemap 地址
- 社交分享：全站 1200×630 品牌分享封面 og-cover.png，完整 Open Graph / Twitter Card 标签，QQ、微博、领英等外部分享带大图
- 百度适配：applicable-device、地域信息等 meta；语义化标签与文章正文排版
- 内容矩阵：7 篇长尾关键词文章（CRM/WMS/进销存/小程序费用/开发流程/合同避坑/选公司），文章与服务页之间双向内链
- 上线后需在百度搜索资源平台、Google Search Console 提交 sitemap 并完成站点验证
5.2 开发环境
确保已安装 Node.js (建议版本 18+) 和 npm。
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 访问地址: http://localhost:5173
5.3 生产构建
# SSG 构建（预渲染所有页面并生成 sitemap.xml）
npm run build
# 构建产物位于 dist/ 目录：每个页面对应 目录/index.html
# 直接部署 dist/ 全部内容到 Web 服务器根目录即可
5.4 部署方式与服务器配置
- 执行 npm run build 生成 dist/ 构建产物
- 将 dist/ 目录全部内容上传至 Web 服务器根目录
- Nginx 建议配置：try_files $uri $uri/ /404.html;（目录式静态页 + 404 兜底）
- 配置域名解析，开启 HTTPS，并在百度搜索资源平台 / Google Search Console 提交收录
5.5 上线后提升曝光的操作清单（按优先级）
- 站长验证与 sitemap 提交：在 index.html 填入百度搜索资源平台、Google Search Console 验证码后重新构建部署；两个平台均提交 https://www.minyida.cn/sitemap.xml
- 百度快速收录：资源平台"链接提交"中开通普通收录（主动推送 API），新文章发布后用平台提供的 token 调用推送接口；新站可申请"快速收录"权益
- 百度统计：注册 tongji.baidu.com 获取统计代码，部署后可看流量、来源词与受访页面，用于持续优化内容
- 百度地图标注：在百度地图商户中心认领/标注公司地址与电话，本地搜索"上海软件定制"类词时获得地图入口曝光
- 内容更新节奏：在 src/data/articles.js 每 1-2 周追加一篇业务相关文章（构建后自动进 sitemap），持续更新是排名的长期杠杆
- 外链与口碑：在知乎、CSDN、掘金、行业社区发布带官网链接的技术文章；B2B 平台（如企业黄页、1688 服务市场）建立公司主页并留官网地址
- 分享物料：微信/朋友圈转发时使用已生成的 og-cover.png 封面；文章结尾均有咨询引导，便于来访者直接联系
6. 响应式设计
网站采用响应式设计，适配不同屏幕尺寸：
- 移动端 (< 768px): 单列布局，汉堡菜单
- 平板端 (768px - 1024px): 双列布局
- 桌面端 (> 1024px): 三列/四列布局
7. 浏览器兼容性
- Chrome (推荐)
- Firefox
- Safari
- Edge
- 移动端浏览器
8. 联系方式
公司名称：民意达软件
服务手机：18516316217
电子邮箱：mingyang5780@163.com
公司地址：上海市青浦区华徐公路605号1号301室
微信咨询：minyida