vitejs · waynzh · Jan 27, 2026 · Jan 26, 2026 · Jan 26, 2026 · Jan 26, 2026
diff --git a/.vitepress/theme/components/ScrimbaLink.vue b/.vitepress/theme/components/ScrimbaLink.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+defineProps<{
+  href: string
+  title: string
+}>()
+</script>
+
+<template>
+  <div class="scrimba">
+    <span class="play-button">
+      <span class="play-icon"></span>
+    </span>
+    <a :href="href" target="_blank" rel="sponsored noopener" :title="title">
+      <slot>在 Scrimba 上观看互动课程</slot>
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.scrimba {
+  margin: 16px 0;
+  color: var(--vp-custom-block-info-text);
+  background-color: var(--vp-custom-block-info-bg);
+  border: 1px solid var(--vp-custom-block-info-border);
+  padding: 16px 20px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.play-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  min-width: 26px;
+  border-radius: 50%;
+  background-color: var(--vp-c-brand-1);
+}
+.play-icon {
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  border-style: solid;
+  border-width: 5px 0 5px 8px;
+  border-color: transparent transparent transparent #fff;
+}
+.scrimba a {
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+}
+.scrimba a:hover {
+  color: var(--vp-c-brand-2);
+}
+</style>
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -12,6 +12,7 @@ import './custom.css'
 import YouTubeVideo from './components/YouTubeVideo.vue'
 import NonInheritBadge from './components/NonInheritBadge.vue'
 import AsideSponsors from './components/AsideSponsors.vue'
+import ScrimbaLink from './components/ScrimbaLink.vue'
 
 export default {
   Layout() {
@@ -25,6 +26,7 @@ export default {
     app.component('SvgImage', SvgImage)
     app.component('YouTubeVideo', YouTubeVideo)
     app.component('NonInheritBadge', NonInheritBadge)
+    app.component('ScrimbaLink', ScrimbaLink)
     app.use(TwoslashFloatingVue)
 
     Theme.enhanceApp(ctx)

diff --git a/_data/team.js b/_data/team.js
@@ -247,7 +247,7 @@ export const cnTranslator = [
   },
   {
     avatar: 'https://www.github.com/waynzh.png',
-    name: 'Wayne Zhang',
+    name: 'waynzh',
     title: '前端开发者',
     org: '',
     orgLink: '',

diff --git a/config/index.md b/config/index.md
@@ -22,6 +22,8 @@ export default {
 vite --config my-config.js
 ```
 
+<ScrimbaLink href="https://scrimba.com/intro-to-vite-c03p6pbbdq/~05jg?via=vite" title="Configuring Vite">在 Scrimba 上观看互动课程</ScrimbaLink>
+
 ::: tip 加载配置文件
 默认情况下，Vite 使用 [Rolldown](https://rolldown.rs/) 将配置文件打包到临时文件中并加载它。这可能会在 monorepo 中导入 TypeScript 文件时引发问题。如果你遇到了这种方法问题，可以通过指定 `--configLoader runner` 以改用 [module runner](/guide/api-environment-runtimes.html#modulerunner)，它不会创建临时配置并将动态转换任何文件。请注意，module runner 不支持配置文件中的 CJS，但外部 CJS 包应该可以正常工作。
 

diff --git a/guide/build.md b/guide/build.md
@@ -2,6 +2,8 @@
 
 当需要将应用部署到生产环境时，只需运行 `vite build` 命令。默认情况下，它使用 `<root>/index.html` 作为其构建入口点，并生成能够静态部署的应用程序包。请查阅 [部署静态站点](./static-deploy) 获取常见服务的部署指引。
 
+<ScrimbaLink href="https://scrimba.com/intro-to-vite-c03p6pbbdq/~037q?via=vite" title="Building for Production">在 Scrimba 上观看互动课程</ScrimbaLink>
+
 ## 浏览器兼容性 {#browser-compatibility}
 
 默认情况下，生产包假定使用包含在 [Baseline](https://web-platform-dx.github.io/web-features/) 广泛可用目标中的现代浏览器。默认的浏览器支持范围是：

diff --git a/guide/env-and-mode.md b/guide/env-and-mode.md
@@ -2,7 +2,7 @@
 
 Vite 在特殊的 `import.meta.env` 对象下暴露了一些常量。这些常量在开发阶段被定义为全局变量，并在构建阶段被静态替换，以使树摇（tree-shaking）更有效。
 
-:::details Example
+:::details 示例
 
 ```js
 if (import.meta.env.DEV) {
@@ -13,6 +13,8 @@ if (import.meta.env.DEV) {
 
 :::
 
+<ScrimbaLink href="https://scrimba.com/intro-to-vite-c03p6pbbdq/~05an?via=vite" title="Env Variables in Vite">在 Scrimba 上观看互动课程</ScrimbaLink>
+
 ## 内置常量 {#built-in-constants}
 
 一些内置常量在所有情况下都可用：

diff --git a/guide/features.md b/guide/features.md
@@ -367,6 +367,8 @@ npm add -D lightningcss
 
 ## 静态资源处理 {#static-assets}
 
+<ScrimbaLink href="https://scrimba.com/intro-to-vite-c03p6pbbdq/~05pq?via=vite" title="Static Assets in Vite">在 Scrimba 上观看互动课程</ScrimbaLink>
+
 导入一个静态资源会返回解析后的 URL：
 
 ```js twoslash

diff --git a/guide/index.md b/guide/index.md
@@ -18,6 +18,8 @@ Vite 还提供了强大的扩展性，可通过其 [插件 API](./api-plugin)
 
 你可以在 [为什么选 Vite](./why) 部分深入了解该项目的设计理念。
 
+<ScrimbaLink href="https://scrimba.com/intro-to-vite-c03p6pbbdq?via=vite" title="Free Vite Course on Scrimba">在 Scrimba 上观看互动课程</ScrimbaLink>
+
 ## 浏览器支持 {#browser-support}
 
 在开发过程中，Vite 假设使用的是现代浏览器。这意味着该浏览器支持大多数最新的 JavaScript 和 CSS 功能。因此，Vite 将 [`esnext` 设置为转换目标](https://esbuild.github.io/api/#target)。这可以防止语法降低，使 Vite 能够尽可能接近原始源代码提供模块。Vite 会注入一些运行时代码以使开发服务器正常工作。这些代码使用了 [Baseline](https://web-platform-dx.github.io/web-features/) 中包含的功能，该功能在每个主要版本发布时（此主要版本为 2026-01-01）新增。
@@ -69,6 +71,8 @@ $ deno init --npm vite
 
 然后按照提示操作即可！
 
+<ScrimbaLink href="https://scrimba.com/intro-to-vite-c03p6pbbdq/~0yhj?via=vite" title="Scaffolding Your First Vite Project">在 Scrimba 上观看互动课程</ScrimbaLink>
+
 ::: tip 兼容性注意
 Vite 需要 [Node.js](https://nodejs.org/en/) 版本 20.19+, 22.12+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
 :::

diff --git a/guide/using-plugins.md b/guide/using-plugins.md
@@ -2,6 +2,8 @@
 
 Vite 可以使用插件进行扩展，这得益于 Rollup 优秀的插件接口设计和一部分 Vite 独有的额外选项。这意味着 Vite 用户可以利用 Rollup 插件的强大生态系统，同时根据需要也能够扩展开发服务器和 SSR 功能。
 
+<ScrimbaLink href="https://scrimba.com/intro-to-vite-c03p6pbbdq/~0y4g?via=vite" title="Using Plugins in Vite">在 Scrimba 上观看互动课程</ScrimbaLink>
+
 ## 添加一个插件 {#adding-a-plugin}
 
 若要使用一个插件，需要将它添加到项目的 `devDependencies` 并在 `vite.config.js` 配置文件中的 `plugins` 数组中引入它。例如，要想为传统浏览器提供支持，可以按下面这样使用官方插件 [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy)：

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vite-docs-cn",
-	"version": "8.0.0-beta.0",
+	"version": "8.0.0-beta.10",
 	"description": "Vite.js documentation Chinese translation.",
 	"repository": "https://github.com/vitejs/docs-cn",
 	"type": "module",
@@ -23,7 +23,7 @@
 		"vitepress": "2.0.0-alpha.15",
 		"vitepress-plugin-group-icons": "^1.7.1",
 		"vue": "^3.5.27",
-		"vue-tsc": "^3.2.3",
+		"vue-tsc": "^3.2.4",
 		"yorkie": "^2.0.0"
 	},
 	"packageManager": "pnpm@9.6.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml