前言：

最近《明日方舟：终末地》的消息越来越多，作为一名“塔塔开”的博士/管理员，我决定动手写一个风格化的计时器网页。除了复刻游戏那标志性的工业机能风 UI 外，我还想借此机会体验一下 腾讯云 EdgeOne Pages (EO Pages) 的静态网站托管服务，特别是它与 CNB (Cloud Native Build) 结合实现的自动化部署流程。

在这篇文章中，我将分享如何使用 Vue 3 构建这个项目，并重点介绍如何通过配置 .cnb.yml 实现从代码提交到全球边缘节点的自动发布。

🛠 技术栈概览：

* 前端框架: Vue 3 (Composition API)

* 构建工具: Vite

* UI 风格: 纯手写 CSS，使用 Flexbox/Grid 布局，配合 Rajdhani 和 Share Tech Mono 字体还原游戏视觉。

* 部署平台: 腾讯云 EdgeOne Pages

🚀 为什么选择 EdgeOne Pages？

传统的静态网站托管通常面临国内访问速度慢、配置繁琐或 SSL 证书管理麻烦等问题。腾讯云 EdgeOne Pages 的优势在于：

全球加速: 依托腾讯云的边缘节点，无论用户在国内还是海外，访问速度都极快。

开箱即用: 支持主流框架（Vue, React, Next.js 等）的一键部署。

免费 SSL: 自动配置 HTTPS 证书。

自动化部署: 提供了完善的 CLI 工具和流水线集成方案。

⚡️ 核心实现：自动化部署配置

为了实现“推送到 main 分支即上线”，我使用了 CNB 插件配合 EdgeOne CLI。这是整个项目的 DevOps 核心。

1. 项目结构与依赖

首先，我们需要在项目中安装 edgeone CLI 工具：

npm install -D edgeone

2. 编写构建流水线 (.cnb.yml)

在项目根目录下创建 .cnb.yml 文件。这是 CNB 的配置文件，类似于 GitHub Actions 的 workflow。

我们需要完成以下步骤：

  1. 配置触发器（Push to main）。

  2. 安装依赖 (npm install)。

  3. 构建项目 (npm run build)。

  4. 关键步骤: 将 package.json 复制到构建产物目录。

  5. 执行部署命令。

以下是完整的配置代码：

# 触发器：推送到 main 分支时触发
main:
  push:
    stages:
      # 第一步：构建项目
      - name: Build Current Project
        image: node:20
        script: 
          - node -v 
          - npm install 
          - npm run build
          # 注意：根据 EdgeOne 文档，手动构建部署时，
          # 需要将 package.json 放入输出目录 (dist) 以便 CLI 识别项目配置
          - cp package.json ./dist/
      
      # 第二步：部署到 EdgeOne Pages
      - name: Deploy to EdgeOne Pages
        image: node:20
        script: 
          # 使用 npx 运行 edgeone CLI 进行部署
          # -n zmd: 指定项目名称
          # ./dist: 指定构建输出目录
          # -t $EDGEONE_API_TOKEN: 使用环境变量中的 Token 进行鉴权
          - npx edgeone pages deploy ./dist -n zmd -t $EDGEONE_API_TOKEN

3. 遇到的坑与解决方案

问题：部署时找不到配置文件 在使用 CLI 手动部署模式时，我发现如果不把 package.json 放到 dist 目录里，edgeone deploy 有时会报错或无法正确识别项目类型。 解决：在构建脚本中显式添加 cp package.json ./dist/ 命令。

问题：Token 安全 不要像我测试时那样把 Token 硬编码在 script 里！务必在 CNB 项目设置的“环境变量”或“密钥存储”中配置 EDGEONE_API_TOKEN，然后在 YAML 中通过 $EDGEONE_API_TOKEN 引用。

🎨 前端细节：还原终末地风格

为了达到“味儿正”的效果，我在 src/components/EndfieldCountdown.vue 中做了很多微调：

  • 字体: 使用了 @fontsource/rajdhani 和 @fontsource/share-tech-mono，并通过本地打包加载，避免了 Google Fonts 在国内加载不稳定的问题。

  • 呼吸灯效: 使用 CSS @keyframes 实现了分隔符的闪烁效果，模拟系统运行时的动态感。

  • 响应式: 针对移动端重新定义了 rem 基准和字体大小，确保在手机上也能完美展示。

/* 充满工业感的字体配置 */
.endfield-container {
  font-family: 'Rajdhani', 'Noto Sans SC', sans-serif;
  background-color: #000;
  color: #fff;
}

/* 动态呼吸效果 */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

🎉 最终效果

现在，每当我执行 git push，CNB 就会自动唤醒构建容器，打包我的 Vue 代码，并通过 EdgeOne 的高速通道推送到边缘节点。整个过程通常只需要几十秒。

访问体验非常丝滑，不再有 Loading 转圈的焦虑。如果你也在寻找一个既能满足国内访问速度，又支持现代 CI/CD 流程的静态托管方案，腾讯云 EdgeOne Pages 绝对值得一试。

项目已经部署在EdgePage EO中点击访问终末地计时界面

🤝 致谢

特别感谢以下项目和资源：

该项目源码在CNB中 仓库连接：https://cnb.cool/JeffreyMing/endfield