release: v2.3.8

Author: ShenQingchuan

.vitepress/theme/custom.css

@@ -16,7 +16,6 @@
   display: none;
 }
 
-
 :root {
   --c-brand: #646cff;
   --c-brand-light: #747bff;
@@ -38,3 +37,17 @@
   display: block;
   margin-bottom: 10px;
 }
+
+.release-tag {
+  font-size: 20px;
+  font-weight: bold;
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 6px;
+  margin-left: 6px;
+  background: var(--c-brand);
+  color: white;
+  border-radius: 10px;
+}

.vitepress/theme/fetchReleaseTag.js

@@ -0,0 +1,20 @@
+import { onMounted } from 'vue'
+
+export default function fetchReleaseTag() {
+  onMounted(() => {
+    fetch('https://api.github.com/repos/vitejs/docs-cn/releases/latest')
+      .then((res) => res.json())
+      .then((json) => {
+        const mainTitle = document.getElementById('main-title')
+        mainTitle.style.position = 'relative'
+
+        const docsReleaseTag = document.createElement('span')
+        docsReleaseTag.classList.add('release-tag')
+        const releaseTagName = json.tag_name
+        docsReleaseTag.innerText = releaseTagName
+
+
+        mainTitle.appendChild(docsReleaseTag)
+      })
+  })
+}

config/index.md

@@ -367,7 +367,7 @@ export default async ({ command, mode }) => {
 
 - **类型：** `boolean | string`
 
-  在开发服务器启动时自动在浏览器中打开应用程序。当此值为字符串时，会被用作 URL 的路径名。
+  在开发服务器启动时自动在浏览器中打开应用程序。当此值为字符串时，会被用作 URL 的路径名。若你想指定喜欢的浏览器打开服务器，你可以设置环境变量 `process.env.BROWSER`（例如：`firefox`）。查看 [这个 `open` 包](https://github.com/sindresorhus/open#app) 获取更多细节。
 
   **示例：**
 
@@ -383,7 +383,7 @@ export default async ({ command, mode }) => {
 
 - **类型：** `Record<string, string | ProxyOptions>`
 
-  为开发服务器配置自定义代理规则。期望接收一个 `{ key: options }` 对象。如果 key 值以 `^` 开头，将会被解释为 `RegExp`。
+  为开发服务器配置自定义代理规则。期望接收一个 `{ key: options }` 对象。如果 key 值以 `^` 开头，将会被解释为 `RegExp`。`configure` 可用于访问 proxy 实例。
 
   使用 [`http-proxy`](https://github.com/http-party/node-http-proxy)。完整选项详见 [此处](https://github.com/http-party/node-http-proxy#options).
 
@@ -406,6 +406,14 @@ export default async ({ command, mode }) => {
           target: 'http://jsonplaceholder.typicode.com',
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/fallback/, '')
+        },
+        // 使用 proxy 实例
+        '/api': {
+          target: 'http://jsonplaceholder.typicode.com',
+          changeOrigin: true,
+          configure: (proxy, options) => {
+            // proxy 是 'http-proxy' 的实例
+          }),
         }
       }
     }
@@ -437,7 +445,6 @@ export default async ({ command, mode }) => {
 
   当使用 `server.middlewareMode` 和 `server.https` 时，你需将 `server.hmr.server` 设置为你 HTTPS 的服务器，这将通过你的服务器来处理 HMR 的安全连接请求。这在使用自签证书的情况下，非常有用。
 
-
 ### server.watch {#server-watch}
 
 - **类型：** `object`
@@ -481,7 +488,7 @@ async function createServer() {
 createServer()
 ```
 
-### server.fsServe.strict {#server-fsserve-strict}
+### server.fs.strict {#server-fs-strict}
 
 - **实验性**
 - **类型：** `boolean`
@@ -494,7 +501,7 @@ createServer()
 - **实验性**
 - **类型：** `string`
 
-  限制哪些文件可以通过 `/@fs/` 路径提供服务。当 `server.fsServe.strict` 设置为 true 时，访问这个目录外的文件将会返回 403 结果。
+  限制哪些文件可以通过 `/@fs/` 路径提供服务。当 `server.fsServe.strict` 设置为 true 时，访问这个目录列表外的文件将会返回 403 结果。
 
   Vite 将会搜索此根目录下潜在工作空间并作默认使用。一个有效的工作空间应符合以下几个条件，否则会默认以 [项目 root 目录](/guide/#index-html-and-project-root) 作备选方案。
 
@@ -507,9 +514,9 @@ createServer()
   ```js
   export default {
     server: {
-      fsServe: {
+      fs: {
         // 可以为项目根目录的上一级提供服务
-        root: '..'
+        allow: ['..']
       }
     }
   }
@@ -525,7 +532,10 @@ createServer()
 
   设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值——`'modules'`，这是指 [支持原生 ES 模块的浏览器](https://caniuse.com/es6-module)。
 
-  另一个特殊值是 “esnext” —— 即指执行 minify 转换（作最小化压缩）并假设有原生动态导入支持。
+  另一个特殊值是 “esnext” —— 即假设有原生动态导入支持，并且将会转译得尽可能小：
+
+  - 如果 [`build.minify`](#build-minify) 选项为 `'terser'`（默认值）， `'esnext'` 将会强制降级为 `'es2019'`。
+  - 其他情况下将完全不会执行转译。
 
   转换过程将会由 esbuild 执行，并且此值应该是一个合法的 [esbuild 目标选项](https://esbuild.github.io/api/#target)。自定义目标也可以是一个 ES 版本（例如：`es2015`）、一个浏览器版本（例如：`chrome58`）或是多个目标组成的一个数组。
 
@@ -584,7 +594,7 @@ createServer()
 
 ### build.sourcemap {#build-sourcemap}
 
-- **类型：** `boolean | 'inline'`
+- **类型：** `boolean | 'inline'` | 'hidden'`
 - **默认：** `false`
 
   构建后是否生成 source map 文件。
@@ -601,6 +611,12 @@ createServer()
 
   传递给 [@rollup/plugin-commonjs](https://github.com/rollup/plugins/tree/master/packages/commonjs) 插件的选项。
 
+### build.dynamicImportVarsOptions {#build-dynamicimportvarsoptions}
+
+- **类型：** [`RollupDynamicImportVarsOptions`](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#options)
+
+  传递给 [@rollup/plugin-dynamic-import-vars](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars) 的选项。
+
 ### build.lib {#build-lib}
 
 - **类型：** `{ entry: string, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string }`
@@ -688,6 +704,10 @@ createServer()
 
   在预构建中强制排除的依赖项。
 
+  :::warning CommonJS
+  CommonJS 的依赖不应该排除在优化外。如果一个 ESM 依赖拥有一个嵌套的 CommonJS 依赖，它也不应被排除。
+  :::
+
 ### optimizeDeps.include {#optimizedeps-include}
 
 - **类型：** `string[]`
@@ -719,7 +739,7 @@ SSR 选项可能会在未来版本中进行调整。
 
 ### ssr.noExternal {#ssr-noexternal}
 
-- **类型：** `string[]`
+- **类型：** `string | RegExp | (string | RegExp)[]`
 
   列出的是防止被 SSR 外部化依赖项。
 

guide/api-hmr.md

@@ -112,4 +112,12 @@ if (import.meta.hot) {
 
 ## `hot.on(event, cb)` {#hot-onevent-cb}
 
-监听自定义 HMR 事件。自定义 HMR 事件可以由插件发送。更多细节详见 [handleHotUpdate](./api-plugin#handleHotUpdate)。
+监听自定义 HMR 事件。
+
+以下 HMR 事件由 Vite 自动触发：
+- `'vite:beforeUpdate'` 当更新即将被应用时（例如，一个模块将被替换）
+- `'vite:beforeFullReload'` 当完整的重载即将发生时
+- `'vite:beforePrune'` 当不再需要的模块即将被剔除时
+- `'vite:error'` 当发生错误时（例如，语法错误）
+
+自定义 HMR 事件可以由插件发送。更多细节详见 [handleHotUpdate](./api-plugin#handleHotUpdate)。

guide/assets.md

@@ -82,3 +82,29 @@ import InlineWorker from './shader.js?worker&inline'
 
 - 引入 `public` 中的资源永远应该使用根绝对路径 —— 举个例子，`public/icon.png` 应该在源码中被引用为 `/icon.png`。
 - `public` 中的资源不应该被 JavaScript 文件引用。
+
+## new URL(url, import.meta.url)
+
+[import.meta.url](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta) 是一个 ESM 的原生功能。，会暴露当前模块的 URL。将它与原生的 [URL 构造器](https://developer.mozilla.org/en-US/docs/Web/API/URL) 结合，传入静态资源与本模块相对的地址，即可得到被完整解析的 URL：
+
+```js
+const imgUrl = new URL('./img.png', import.meta.url)
+
+document.getElementById('hero-img').src = imgUrl
+```
+
+这在现代浏览器中能够原生使用 - 实际上，Vite 并不需要在开发阶段处理这些代码！
+
+这个模式同样还可以通过字符串模板支持动态 URL：
+
+```js
+function getImageUrl(name) {
+  return new URL(`./dir/${name}.png`, import.meta.url).href
+}
+```
+
+在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。
+
+::: 警告 注意：无法在 SSR 中使用
+如果你正在以服务端渲染模式使用 Vite 则此模式不支持，因为 `import.meta.url` 在浏览器和 Node.js 中有不同的语义。服务端的产物也无法预先确定客户端主机 URL。
+:::

guide/env-and-mode.md

@@ -6,7 +6,7 @@ Vite 在一个特殊的 **`import.meta.env`** 对象上暴露环境变量。这
 
 - **`import.meta.env.MODE`**: {string} 应用运行的[模式](#模式)。
 
-- **`import.meta.env.BASE_URL`**: {string} 部署应用时的基本URL。他由[`base` 配置项](/config/#base)决定。
+- **`import.meta.env.BASE_URL`**: {string} 部署应用时的基本 URL。他由[`base` 配置项](/config/#base)决定。
 
 - **`import.meta.env.PROD`**: {boolean} 应用是否运行在生产环境。
 
@@ -24,7 +24,7 @@ Vite 在一个特殊的 **`import.meta.env`** 对象上暴露环境变量。这
 
 ## `.env` 文件 {#env-files}
 
-Vite 使用 [dotenv](https://github.com/motdotla/dotenv) 从你的 [环境目录](/config/#envDir) 中的下列文件加载额外的环境变量：
+Vite 使用 [dotenv](https://github.com/motdotla/dotenv) 从你的 [环境目录](/config/#envdir) 中的下列文件加载额外的环境变量：
 
 ```
 .env                # 所有情况下都会加载
@@ -46,14 +46,14 @@ VITE_SOME_KEY=123
 
 :::warning 安全注意事项
 
-- `.env.*.local` 文件应是本地的，可以包含敏感变量。你应该将 `.local` 添加到你的 `.gitignore` 中，以避免它们被git检入。
+- `.env.*.local` 文件应是本地的，可以包含敏感变量。你应该将 `.local` 添加到你的 `.gitignore` 中，以避免它们被 git 检入。
 
 - 由于任何暴露给 Vite 源码的变量最终都将出现在客户端包中，`VITE_*` 变量应该不包含任何敏感信息。
   :::
 
 ### 智能提示 {#intellisense}
 
-默认情况下，Vite为 `import.meta.env` 提供了类型定义。随着在 `.env[mode]` 文件中自定义了越来越多的环境变量，你可能想要在代码中获取这些以 `VITE_` 为前缀的用户自定义环境变量的 TypeScript 智能提示。
+默认情况下，Vite 为 `import.meta.env` 提供了类型定义。随着在 `.env[mode]` 文件中自定义了越来越多的环境变量，你可能想要在代码中获取这些以 `VITE_` 为前缀的用户自定义环境变量的 TypeScript 智能提示。
 
 要想做到这一点，你可以在 `src` 目录下创建一个 `env.d.ts` 文件，接着按下面这样增加 `ImportMetaEnv` 的定义：
 

guide/using-plugins.md

@@ -33,7 +33,7 @@ Falsy 虚值的插件将被忽略，可以用来轻松地启用或停用插件
 Vite 旨在为常见的 Web 开发范式提供开箱即用的支持。在寻找一个 Vite 或兼容的 Rollup 插件之前，请先查看 [功能指引](../guide/features.md)。大量在 Rollup 项目中需要使用插件的用例在 Vite 中已经覆盖到了。
 :::
 
-查看 [Plugins 章节](../plugins) 获取官方插件信息。社区插件列表请参见 [awesome-vite](https://github.com/vitejs/awesome-vite#plugins)。而对于兼容的 Rollup 插件，请查看 [Vite Rollup 插件](https://vite-rollup-plugins.patak.dev) 获取一个带使用说明的兼容 Rollup 官方插件列表，若列表中没有找到，则请参阅 [Rollup 插件兼容性章节](../guide/api-plugin#rollup-plugin-compatibility)。
+查看 [Plugins 章节](../plugins/) 获取官方插件信息。社区插件列表请参见 [awesome-vite](https://github.com/vitejs/awesome-vite#plugins)。而对于兼容的 Rollup 插件，请查看 [Vite Rollup 插件](https://vite-rollup-plugins.patak.dev) 获取一个带使用说明的兼容 Rollup 官方插件列表，若列表中没有找到，则请参阅 [Rollup 插件兼容性章节](../guide/api-plugin#rollup-plugin-compatibility)。
 
 你也可以使用此 [npm Vite 插件搜索链接](https://www.npmjs.com/search?q=vite-plugin&ranking=popularity) 来找到一些遵循了 [推荐约定](./api-plugin.md#conventions) 的 Vite 插件，或者此 [npm Rollup 插件搜索链接](https://www.npmjs.com/search?q=rollup-plugin&ranking=popularity) 获取 Rollup 插件。
 

index.md

@@ -34,4 +34,7 @@ footer: MIT Licensed | Copyright © 2019-present Evan You & Vite Contributors
 
 <script setup>
 import sponsors from './.vitepress/theme/sponsors.json'
+import fetchReleaseTag from './.vitepress/theme/fetchReleaseTag.js'
+
+fetchReleaseTag()
 </script>