双构建独立部署方案使用指南

📋 方案概述

本项目采用双构建独立部署方案，将中英文网站分别构建为两个完全独立的静态站点：

中文站: ls-ai.cn → 构建输出到 dist-cn/
英文站: flareseek.com → 构建输出到 dist-en/

核心优势

✅ SEO 最优化 - 两个独立域名，搜索引擎独立收录
✅ URL 结构一致 - 两站路径完全对应，如 /docs/installation
✅ 性能极佳 - 无语言切换逻辑，静态文件直接访问
✅ 部署灵活 - 可部署到不同服务器或CDN
✅ 维护简单 - 单一代码仓库，一次更新双站同步

🚀 快速开始

1. 本地开发

bash

# 开发中文站（预览根目录内容）
npm run dev:cn
# 访问 http://localhost:5173

# 开发英文站（预览 /en/ 目录内容）
npm run dev:en
# 访问 http://localhost:5173

2. 构建生产版本

bash

# 构建中文站 → dist-cn/
npm run build:cn

# 构建英文站 → dist-en/
npm run build:en

# 一次性构建两个站点
npm run build:all

3. 本地预览

bash

# 预览中文站
npm run preview:cn
# 访问 http://localhost:4173

# 预览英文站
npm run preview:en
# 访问 http://localhost:4174

📁 项目结构

project/
├── .vitepress/
│   ├── config/
│   │   └── shared.ts          # 共享配置（构建优化、主题等）
│   ├── config-cn.ts           # 中文站配置 ⭐
│   ├── config-en.ts           # 英文站配置 ⭐
│   └── ...
├── docs/                      # 中文文档
├── blog/                      # 中文博客
├── en/                        # 英文内容（完整镜像）
│   ├── docs/                  # 英文文档
│   ├── blog/                  # 英文博客
│   └── index.md               # 英文首页
├── dist-cn/                   # 中文站构建输出
└── dist-en/                   # 英文站构建输出

⚙️ 配置文件说明

`config/shared.ts` - 共享配置

包含两个站点共用的配置：

构建优化（代码分割、压缩）
Markdown 配置
Vite 配置
主题基础配置

`config-cn.ts` - 中文站配置

typescript

{
  lang: 'zh-CN',
  base: '/',
  outDir: './dist-cn',
  srcExclude: ['**/en/**'],  // 排除英文内容
  sitemap: { hostname: 'https://ls-ai.cn' },
  // ... 中文SEO配置
}

关键配置:

srcExclude: ['**/en/**'] - 排除所有英文内容
outDir: './dist-cn' - 输出到独立目录
包含中文SEO标签、统计代码

`config-en.ts` - 英文站配置

typescript

{
  lang: 'en-US',
  base: '/',
  srcDir: './en',            // 源目录指向 /en/
  outDir: './dist-en',
  sitemap: { hostname: 'https://flareseek.com' },
  // ... 英文SEO配置
}

关键配置:

srcDir: './en' - 将 /en/ 作为根目录
构建后 /en/docs/installation.md → /docs/installation.html
路径自动重写，无需手动处理

🔗 跨域语言切换

工作原理

用户在 ls-ai.cn/docs/installation 点击语言切换器
JavaScript 读取当前路径 /docs/installation
跳转到 flareseek.com/docs/installation（路径一对一对应）

配置文件

public/scripts/crossDomainMapping.js - 跨域映射配置

javascript

const DOMAIN_MAPPING = {
  'zh-CN': {
    domain: 'ls-ai.cn',
    name: '类视搜图'
  },
  'en-US': {
    domain: 'flareseek.com',
    name: 'FlareSeek'
  }
}

组件使用

CrossDomainLanguageSwitcher.vue 组件会自动：

检测当前域名和语言
生成目标语言的完整URL
处理语言切换跳转

📦 构建产物

中文站 (`dist-cn/`)

dist-cn/
├── index.html              # 首页（来自 /index.md）
├── docs/
│   ├── installation.html
│   ├── faq.html
│   └── ...
├── blog/
│   ├── index.html
│   └── posts/
├── assets/
└── sitemap.xml             # 中文站点地图

英文站 (`dist-en/`)

dist-en/
├── index.html              # 首页（来自 /en/index.md）
├── docs/
│   ├── installation.html   # 来自 /en/docs/installation.md
│   ├── faq.html
│   └── ...
├── blog/
│   ├── index.html
│   └── posts/
├── assets/
└── sitemap.xml             # 英文站点地图

URL 对应关系:

源文件	中文站 URL	英文站 URL
`/index.md`	`ls-ai.cn/`	-
`/en/index.md`	-	`flareseek.com/`
`/docs/installation.md`	`ls-ai.cn/docs/installation`	-
`/en/docs/installation.md`	-	`flareseek.com/docs/installation`

🌐 部署方案

方案A: 单服务器部署

适用场景: 预算有限、流量较小

服务器 (IP: xxx.xxx.xxx.xxx)
├── /var/www/leishisoutu-cn/    ← dist-cn/
└── /var/www/leishisoutu-en/    ← dist-en/

Nginx 配置:
- ls-ai.cn → /var/www/leishisoutu-cn/
- flareseek.com → /var/www/leishisoutu-en/

方案B: 双服务器部署

适用场景: 全球化访问、性能要求高

中文服务器 (国内)
└── /var/www/leishisoutu-cn/    ← dist-cn/
    └── CDN: 阿里云/腾讯云

英文服务器 (海外)
└── /var/www/leishisoutu-en/    ← dist-en/
    └── CDN: Cloudflare

部署步骤

构建站点
bash
```
npm run build:all
```

上传文件

bash

# 中文站
scp -r dist-cn/* user@server1:/var/www/leishisoutu-cn/

# 英文站
scp -r dist-en/* user@server2:/var/www/leishisoutu-en/

配置Nginx（参考下方配置）

申请SSL证书

bash

certbot --nginx -d ls-ai.cn -d www.ls-ai.cn
certbot --nginx -d flareseek.com -d www.flareseek.com

🔧 Nginx 配置示例

中文站配置

nginx

server {
    listen 80;
    server_name ls-ai.cn www.ls-ai.cn;
    
    # 强制HTTPS
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name ls-ai.cn www.ls-ai.cn;
    
    root /var/www/leishisoutu-cn;
    index index.html;
    
    # SSL证书
    ssl_certificate /etc/letsencrypt/live/ls-ai.cn/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/ls-ai.cn/privkey.pem;
    
    # 静态资源缓存
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|webp|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    # SPA路由处理
    location / {
        try_files $uri $uri/ $uri.html =404;
    }
    
    # gzip压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
}

英文站配置

nginx

server {
    listen 80;
    server_name flareseek.com www.flareseek.com;
    
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name flareseek.com www.flareseek.com;
    
    root /var/www/leishisoutu-en;
    index index.html;
    
    ssl_certificate /etc/letsencrypt/live/flareseek.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/flareseek.com/privkey.pem;
    
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|webp|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    location / {
        try_files $uri $uri/ $uri.html =404;
    }
    
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
}

🔍 SEO 优化

hreflang 标签（已配置）

两个站点的每个页面都包含 hreflang 标签：

中文站:

html

<link rel="alternate" hreflang="zh-CN" href="https://ls-ai.cn/docs/installation" />
<link rel="alternate" hreflang="en" href="https://flareseek.com/docs/installation" />

英文站:

html

<link rel="alternate" hreflang="zh-CN" href="https://ls-ai.cn/docs/installation" />
<link rel="alternate" hreflang="en" href="https://flareseek.com/docs/installation" />

Sitemap

中文站: https://ls-ai.cn/sitemap.xml
英文站: https://flareseek.com/sitemap.xml

分别提交到 Google Search Console

✅ 验证清单

部署完成后，请检查：

基础功能

[ ] 中文站所有页面正常访问
[ ] 英文站所有页面正常访问
[ ] HTTPS 证书有效
[ ] 静态资源加载正常

URL 结构

[ ] 中文站路径格式: ls-ai.cn/docs/xxx
[ ] 英文站路径格式: flareseek.com/docs/xxx
[ ] 相同路径在两站都能访问

跨域切换

[ ] 语言切换器显示正常
[ ] 切换功能正常工作
[ ] 路径映射正确

SEO

[ ] 每个页面都有 hreflang 标签
[ ] Sitemap 生成正确
[ ] robots.txt 配置正确

🐛 常见问题

Q1: 构建后英文站路径还是 `/en/xxx`？

原因: config-en.ts 中 srcDir 配置错误

解决:

typescript

// ❌ 错误
srcDir: '../en'

// ✅ 正确
srcDir: './en'

Q2: 语言切换后404？

原因: 两个站点的文件名不一致

解决: 确保中英文内容的文件名完全对应

/docs/installation.md
/en/docs/installation.md  ← 文件名必须相同

Q3: 静态资源404？

原因: /public/ 目录在 /en/ 中缺失

解决:

方案1: 复制 /public/ 到 /en/public/
方案2: 使用软链接（Linux/Mac）
bash
```
cd en
ln -s ../public public
```

Q4: 本地开发时如何测试跨域切换？

解决: 修改 hosts 文件

127.0.0.1  ls-ai.cn
127.0.0.1  flareseek.com

然后分别运行两个预览：

bash

npm run preview:cn  # http://ls-ai.cn:4173
npm run preview:en  # http://flareseek.com:4174

📊 性能优化建议

CDN 配置

资源类型	缓存时间	备注
HTML	5分钟	支持快速更新
CSS/JS (hash)	1年	文件名包含hash
图片	1个月	平衡更新和缓存
字体	1年	很少变化

🔄 更新流程

修改源文件（中文或英文）
构建两个站点: npm run build:all
测试构建产物: npm run preview:cn / preview:en
部署到服务器
清除CDN缓存（如果使用）

📞 技术支持

如有问题，请检查：

本文档的常见问题部分
VitePress 官方文档: https://vitepress.dev
项目 Issues

最后更新: 2025-01-10

双构建独立部署方案使用指南 ​

📋 方案概述 ​

核心优势 ​

🚀 快速开始 ​

1. 本地开发 ​

2. 构建生产版本 ​

3. 本地预览 ​

📁 项目结构 ​

⚙️ 配置文件说明 ​

config/shared.ts - 共享配置 ​

config-cn.ts - 中文站配置 ​

config-en.ts - 英文站配置 ​

🔗 跨域语言切换 ​

工作原理 ​

配置文件 ​

组件使用 ​

📦 构建产物 ​

中文站 (dist-cn/) ​

英文站 (dist-en/) ​

🌐 部署方案 ​

方案A: 单服务器部署 ​

方案B: 双服务器部署 ​

部署步骤 ​

🔧 Nginx 配置示例 ​

中文站配置 ​

英文站配置 ​

🔍 SEO 优化 ​

hreflang 标签（已配置） ​

Sitemap ​

✅ 验证清单 ​

基础功能 ​

URL 结构 ​

跨域切换 ​

SEO ​

🐛 常见问题 ​

Q1: 构建后英文站路径还是 /en/xxx？ ​

Q2: 语言切换后404？ ​

Q3: 静态资源404？ ​

Q4: 本地开发时如何测试跨域切换？ ​

📊 性能优化建议 ​

CDN 配置 ​

推荐CDN ​

🔄 更新流程 ​

📞 技术支持 ​

双构建独立部署方案使用指南

📋 方案概述

核心优势

🚀 快速开始

1. 本地开发

2. 构建生产版本

3. 本地预览

📁 项目结构

⚙️ 配置文件说明

`config/shared.ts` - 共享配置

`config-cn.ts` - 中文站配置

`config-en.ts` - 英文站配置

🔗 跨域语言切换

工作原理

配置文件

组件使用

📦 构建产物

中文站 (`dist-cn/`)

英文站 (`dist-en/`)

🌐 部署方案

方案A: 单服务器部署

方案B: 双服务器部署

部署步骤

🔧 Nginx 配置示例

中文站配置

英文站配置

🔍 SEO 优化

hreflang 标签（已配置）

Sitemap

✅ 验证清单

基础功能

URL 结构

跨域切换

SEO

🐛 常见问题

Q1: 构建后英文站路径还是 `/en/xxx`？

Q2: 语言切换后404？

Q3: 静态资源404？

Q4: 本地开发时如何测试跨域切换？

📊 性能优化建议

CDN 配置

推荐CDN

🔄 更新流程

📞 技术支持