Skip to content
12 changes: 9 additions & 3 deletions config/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,9 +101,11 @@ export default defineConfig(async ({ command, mode }) => {

## 在配置中使用环境变量 {#using-environment-variables-in-config}

环境变量通常可以从 `process.env` 获得
在评估配置文件本身时,可用的环境变量仅限于当前进程环境中已经存在的变量(`process.env`)。Vite 有意推迟加载任何 `.env*` 文件,直到用户配置解析完成之后,因为要加载的文件集合依赖于配置选项如 [`root`](/guide/#index-html-and-project-root) 和 [`envDir`](/config/shared-options.md#envdir),以及最终的 `mode`

注意 Vite 默认是不加载 `.env` 文件的,因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个,举个例子,`root` 和 `envDir` 选项会影响加载行为。不过当你的确需要时,你可以使用 Vite 导出的 `loadEnv` 函数来加载指定的 `.env` 文件。
这意味着:在你的 `vite.config.*` 运行时,定义在 `.env`、`.env.local`、`.env.[mode]` 或 `.env.[mode].local` 中的变量不会自动注入到 `process.env` 中。它们会在稍后自动加载,并通过 `import.meta.env` 暴露给应用程序代码(使用默认的 `VITE_` 前缀过滤器),正如[环境变量和模式](/guide/env-and-mode.html)中所记录的那样。因此,如果你只需要将 `.env*` 文件中的值传递给应用程序,则无需在配置中调用任何内容。

但是,如果 `.env*` 文件中的值必须影响配置本身(例如设置 `server.port`、条件性启用插件或计算 `define` 替换),你可以使用导出的 [`loadEnv`](/guide/api-javascript.html#loadenv) 辅助函数手动加载它们。

```js twoslash
import { defineConfig, loadEnv } from 'vite'
Expand All @@ -114,10 +116,14 @@ export default defineConfig(({ mode }) => {
// `VITE_` 前缀。
const env = loadEnv(mode, process.cwd(), '')
return {
// vite 配置
define: {
// Provide an explicit app-level constant derived from an env var.
__APP_ENV__: JSON.stringify(env.APP_ENV),
},
// Example: use an env var to set the dev server port conditionally.
server: {
port: env.APP_PORT ? Number(env.APP_PORT) : 5173,
},
}
})
```
Expand Down
21 changes: 18 additions & 3 deletions guide/api-environment-plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,19 @@ Vite 服务器有一个共享的插件管道,但在处理模块时,它总是

## 使用钩子注册新环境 {#registering-new-environments-using-hooks}

插件可以在 `config` 钩子中添加新环境例如,为了有一个专门用于 [RSC](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) 的模块图)
插件可以在 `config` 钩子中添加新环境例如,[RSC 支持](/plugins/#vitejs-plugin-rsc)使用一个额外的环境来拥有一个带有 `react-server` 条件的独立模块图

```ts
config(config: UserConfig) {
config.environments.rsc ??= {}
return {
environments: {
rsc: {
resolve: {
conditions: ['react-server', ...defaultServerConditions],
},
},
},
}
}
```

Expand All @@ -48,8 +56,15 @@ Vite 服务器有一个共享的插件管道,但在处理模块时,它总是

```ts
configEnvironment(name: string, options: EnvironmentOptions) {
// add "workerd" condition to the rsc environment
if (name === 'rsc') {
options.resolve.conditions = // ...
return {
resolve: {
conditions: ['workerd'],
},
}
}
}
```

## `hotUpdate` 钩子 {#the-hotupdate-hook}
Expand Down
1 change: 1 addition & 0 deletions guide/features.md
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,7 @@ HTML 文件位于 Vite 项目的[最前端和中心](/guide/#index-html-and-proj
- Vue JSX 支持:[@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx)
- React 支持:[@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react)
- React 使用 SWC 的支持:[@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc)
- [React Server Components (RSC)](https://react.dev/reference/rsc/server-components) 支持:[@vitejs/plugin-rsc](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc)

查看 [插件指南](/plugins/) 了解更多信息。

Expand Down
2 changes: 1 addition & 1 deletion guide/rolldown.md
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ const plugin = {

### 钩子过滤功能 {#hook-filter-feature}

Rolldown 引入了[钩子过滤功能](https://rolldown.rs/guide/plugin-development#plugin-hook-filters),以减少 Rust 和 JavaScript 运行时之间的通信开销。通过使用此功能,你可以使你的插件性能更高。
Rolldown 引入了[钩子过滤功能](https://rolldown.rs/plugins/hook-filters),以减少 Rust 和 JavaScript 运行时之间的通信开销。通过使用此功能,你可以使你的插件性能更高。
这也在 Rollup 4.38.0+ 和 Vite 6.3.0+ 被支持。为了使你的插件向后兼容较旧的版本,请确保也在钩子处理程序内运行过滤器。

::: tip
Expand Down
2 changes: 1 addition & 1 deletion guide/static-deploy-github-pages.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ jobs:
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
uses: actions/upload-pages-artifact@v4
with:
# 上传 dist 文件夹
path: './dist'
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"private": true,
"license": "CC BY-NC-SA 4.0",
"devDependencies": {
"@shikijs/vitepress-twoslash": "^3.7.0",
"@shikijs/vitepress-twoslash": "^3.11.0",
"@type-challenges/utils": "^0.1.1",
"@types/express": "^5.0.3",
"@types/node": "^20.9.2",
Expand All @@ -22,7 +22,7 @@
"vitepress": "^2.0.0-alpha.7",
"vitepress-plugin-group-icons": "^1.6.1",
"vitepress-plugin-llms": "^1.7.1",
"vue": "^3.5.18",
"vue": "^3.5.19",
"vue-tsc": "^3.0.5",
"yorkie": "^2.0.0"
},
Expand Down
12 changes: 11 additions & 1 deletion plugins/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,17 @@ Vite 旨在为常见的 web 开发工作提供开箱即用的支持。在搜索

在开发时会将 Babel 替换为 SWC。在生产环境构建期间,若使用了插件则会使用 SWC+esbuild,若没有使用插件则仅会用到 esbuild。对不需要非标准 React 扩展的大型项目,冷启动和模块热替换(HMR)将会有显著提升。

### [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) {#vitejs-plugin-legacy}
### [@vitejs/plugin-rsc](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc)

Vite 通过该插件支持 [React Server Components (RSC)](https://react.dev/reference/rsc/server-components)。它利用 [Environment API](/guide/api-environment) 提供底层原语,React 框架可以使用这些原语来集成 RSC 功能。你可以通过以下方式尝试一个最小的独立 RSC 应用程序:

```bash
npm create vite@latest -- --template rsc
```

阅读[插件文档](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc)了解更多详情。

### [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy)

为打包后的文件提供传统浏览器兼容性支持。

Expand Down
Loading