Vue.js讲解（高英解析实战）——接入AI翻译助手

本文以高级英语6的翻译与解析内容为材料，使用Vue.js建构简单的静态网站，接入AI翻译助手，并将其部署到静态托管网站。

成品展示： https://advanced-en.pages.dev/

1. 初始化项目

1.1 创建项目目录

mkdir advanced-english
cd advanced-english

1.2 初始化项目

使用 npm 或 yarn 初始化项目（取决于你的包管理器）：

npm init -y

或者：

yarn init -y

1.3 安装 VitePress

npm install vitepress --save-dev

或者：

yarn add vitepress --dev

2. 创建项目结构

在项目根目录创建以下文件和文件夹：

advanced-english
├── docs/           # 用于存放高英网站内容
│   ├── index.md    # 入口页面文件
│   └── .vitepress/ # 存放配置文件和主题设置
│       └── config.js # 配置文件
└── package.json

2.1 创建入口页面

在 docs/index.md 文件中添加一些内容，作为首页内容：

欢迎来到高英翻译站点，本站点目前提供大三下高英课文的Text 1部分**翻译与解析**，同时已在**页面右下角**接入**内置sys提示词**的**AI翻译助手**，后续可能会接入高英课文与其他翻译领域论文作为**RAG知识库**。

目前唯一美中不足的是：本站点部署在香港服务器，而AI翻译助手由于Gemini的地区限制只能部署在美国服务器，因此如果不使用网络代理、VPN，您打开AI助手的速度可能很慢；如果您在中国大陆江浙一带与新疆地区，AI助手则会由于SNI阻断和双向墙而无法加载。此外，AI助手常规模式下模型为低成本的GPT 4o模型，**如果您需要更好的翻译效果，请联系站长([email protected])开启Gemini、Claude 3.5s、Deepseek r1等模型，切勿滥用。**

2.2 配置 VitePress

在 docs/.vitepress/config.js 文件中添加基本配置，我的配置如下：

export default {
  title: 'Advanced English', // 网站标题
  description: 'A site for mastering advanced English skills', // 网站描述（SEO）
  themeConfig: { 
    nav: [ // 导航栏链接
      { text: 'Home', link: '/' },
      { text: 'About', link: '/about' }
    ],
    sidebar: [ // 侧边栏
      { text: 'Guide', collapsible: true, items: [
        { text: 'Quick Start', link: '/guide/quickstart' },
        { text: 'Configuration', link: '/guide/config' }
      ]},
    ]
  }
}

然后再在 package.json 中定义一个脚本方便启动。

{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  }
}

3. 启动开发环境

运行以下命令启动本地开发环境：

npm run docs:dev -- --host 0.0.0.0 --port 4666

命令讲解："--" 是传参用的，后面的端口代表一种参数
然后打开浏览器访问 http://localhost:4666 查看当前 VitePress 网站效果，如果使用的是VPS，则将localhost切换为VPS的IP地址，并且启动的时候需要传host参数。如果使用的是大厂的云服务器，比如腾讯、华为、Azure，还需要放开端口

4. 添加更多页面

这里我就把我创建的13个高英课文翻译讲解的MD文件复制到 advanced-english/docs文件夹下，然后在 config.js 更新导航和侧边栏的链接：

export default {
  // 网站标题
  title: 'Advanced English 6th',
  // 网站描述
  description: 'Where Possible Begins',
  // 主题配置
  themeConfig: {
    sidebar: [
      {
        text: 'Main Content',
        items: [
          { text: 'Unit 1', link: '/Unit%201' },  // Unit 1.md
          { text: 'Unit 2', link: '/Unit%202' },  // Unit 2.md
          { text: 'Unit 3', link: '/Unit%203' },  // Unit 3.md
          { text: 'Unit 4', link: '/Unit%204' },  // Unit 4.md
          { text: 'Unit 5', link: '/Unit%205' },  // Unit 5.md
          { text: 'Unit 6', link: '/Unit%206' },  // Unit 6.md
          { text: 'Unit 7', link: '/Unit%207' },  // Unit 7.md
          { text: 'Unit 8', link: '/Unit%208' },  // Unit 8.md
          { text: 'Unit 9', link: '/Unit%209' },  // Unit 9.md
          { text: 'Unit 10', link: '/Unit%2010' }, // Unit 10.md
          { text: 'Unit 11', link: '/Unit%2011' }, // Unit 11.md
          { text: 'Unit 12', link: '/Unit%2012' }, // Unit 12.md
        ]
      }
    ]
  }
};

5. 构建静态网站

运行以下命令构建静态网站：

npx vitepress build docs

构建完成后，静态文件会保存在 advanced-english/docs/.vitepress/dist 目录中，打开index页面文件进行修改，嵌入Dify的嵌入代码即可：

  <script>
    window.difyChatbotConfig = {
      token: 'qKza0oEGifCT'
    }
  </script>
  <script
    src="https://udify.app/embed.min.js"
    id="qKza0oEGifCTb"
    defer>
  </script>

6. 部署网站

我选择两种托管型部署方式，这样稳定性更强一点，而且也不用花费太多精力管理：

6.1 部署到 GitHub Pages

1.先在 GitHub 上创建一个关联的仓库 advanced-english。
2. 在 package.json 中添加 deploy 脚本：

"scripts": {
  "deploy": "vitepress build docs && cp docs/.vitepress/dist/.git . && cd docs/.vitepress/dist && git init && git add -A && git commit -m 'deploy' && git push -f [email protected]:<idkbungle>/advanced-english.git main:gh-pages"
}

3. 运行以下命令部署：

npm run deploy

6.2 部署到Cloudflare Pages

1. 安装 Cloudflare CLI (Wrangler)

npm install -g wrangler

2. 登录到 Cloudflare

wrangler login

3. 创建项目配置 (wrangler.toml)
   静态网站需要一个配置文件 wrangler.toml，用来定义部署到 Cloudflare Pages 的一些参数。在项目根目录 advanced-english 中创建一个 wrangler.toml 文件：

touch wrangler.toml

编辑 wrangler.toml 文件，内容如下：

name = "advanced-english" # 项目名称
type = "webpack"         # 应用类型（静态资源用 webpack）
account_id = "<ACCOUNT_ID>" # Cloudflare 账户 ID，需要从账户中获取
workers_dev = true       # 是否部署到 Cloudflare Workers 的开发模式

[site]
bucket = "./docs/.vitepress/dist" # 静态文件目录，VitePress 的输出目录
entry-point = "workers-site"     # 静态站点入口点

第三行的Cloudflare Account ID需要登录 Cloudflare 仪表盘，在 "API Tokens" 页面获取 Account ID，复制粘贴到 wrangler.toml 的配置中。

4. 正式部署到 Cloudflare Workers

wrangler publish

总结

构建一个基于 VitePress 的 advanced-english 静态网站的完整流程如下：

1. 初始化项目并安装 VitePress。
2. 创建项目结构，包含内容页面和配置文件。
3. 启动开发环境，进行实时预览和修改。
4. 添加更多内容页面和导航配置。
5. 构建静态文件并嵌入Dify源码。
6. 部署到 GitHub Pages 或其他托管服务。