一、为什么前端要学 YAML？

很多前端同学第一次接触 YAML，往往是在 CI/CD 配置、Docker、Kubernetes、GitHub Actions、Vite / Webpack 配置、低代码平台 等场景中。

作为一名前端开发者，你很可能已经在这些地方见过它：

• docker-compose.yml

• github-actions/*.yml

• pnpm-workspace.yaml

• vitepress/config.yaml

• 各类低代码 / 表单 / 页面描述配置

YAML 的定位很明确：

一种 给人看的配置语言 ，不是给机器写算法的。

它的目标只有一个： 让配置更直观、更少噪音、更容易维护 。

二、YAML 是什么？

YAML（YAML Ain't Markup Language）是一种：

• 数据序列化语言

• 常用于配置文件

• 可表达 JSON 能表达的所有结构

你可以把它理解为：

“没有大括号和引号的 JSON”

例如，JSON：

{ "name": "vite-app", "port": 5173, "open": true}

对应的 YAML：

name: vite-appport: 5173open: true

是不是一眼就更清爽了？

三、YAML 的核心语法（前端必会）

1️⃣ 键值对（Map / Object）

title: 首页version: 1published: true

特点：

• 使用 : 表示键值对

• : 后必须有一个空格

2️⃣ 列表（Array）

pages: - 首页 - 关于我们 - 联系方式

等价于 JS：

['首页', '关于我们', '联系方式']

也可以写成对象数组：

routes: - path: / component: Home - path: /about component: About

3️⃣ 缩进：YAML 的灵魂

YAML 用缩进表示层级，而不是 {} 。

✅ 正确：

server: host: localhost port: 3000

❌ 错误（缩进不一致）：

server: host: localhost port: 3000

⚠️ 注意：

• 只能用 空格 ，不能用 Tab

• 通常用 2 个空格

4️⃣ 字符串与特殊值

name: "vite-app"desc: vite 前端项目

以下值 不是字符串 ：

isDev: truecount: 10empty: 

如果你想强制字符串：

port: "3000"

5️⃣ 多行字符串（前端很常用）

description: | 这是一个前端项目 使用 Vite + Vue3 支持多环境配置

等价于：

"这是一个前端项目\n使用 Vite + Vue3\n支持多环境配置"

四、YAML vs JSON（前端视角）

结论：

• 配置文件：优先 YAML

• 接口传输：继续 JSON

五、前端真实使用场景

1️⃣ CI/CD（GitHub Actions）

name: Build
on: [push]
jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - run: npm install - run: npm run build

2️⃣ Docker Compose（前端项目部署）

version: "3"services: web: image: nginx ports: - "80:80" volumes: - ./dist:/usr/share/nginx/html

3️⃣ pnpm workspace

packages: - "apps/*" - "packages/*"

4️⃣ 低代码 / 页面配置

page: title: 用户列表 components: - type: table api: /api/users - type: button text: 新增用户

六、前端常踩的坑

❌ 1. 缩进错误导致配置失效

这是 最常见问题 ，排查思路：

• 对齐是否一致

• 是否混用了 Tab

❌ 2. 冒号后忘记空格

name:test # ❌name: test # ✅

❌ 3. true / false 被误当成字符串

open: "true" # 实际是字符串

七、前端开发的最佳实践

✅ 建议：

• 统一 2 空格缩进

• 复杂配置分模块拆分

• 多写注释

• 配合编辑器 YAML 校验

VS Code 插件推荐：

• YAML （Red Hat）

• Prettier （格式化）

八、总结

对于前端开发者来说，YAML 并不是“后端专属”，而是：

• 配置能力的基础

• DevOps 的入门钥匙

• 低代码、工程化不可或缺的一环

如果你已经精通 JS / TS，那么：

掌握 YAML，几乎没有学习成本，但收益很高。