File tree Expand file tree Collapse file tree 13 files changed +42
-37
lines changed Expand file tree Collapse file tree 13 files changed +42
-37
lines changed Original file line number Diff line number Diff line change @@ -15,6 +15,11 @@ module.exports = {
15
15
editLinks : true ,
16
16
editLinkText : '为此页提供修改建议' ,
17
17
18
+ /* algolia: {
19
+ apiKey: '<API_KEY>',
20
+ indexName: '<INDEX_NAME>'
21
+ }, */
22
+
18
23
carbonAds : {
19
24
carbon : 'CEBIEK3N' ,
20
25
placement : 'vitejsdev'
Original file line number Diff line number Diff line change @@ -67,9 +67,9 @@ Vite 默认只支持原生支持 ESM 的现代浏览器,但可以通过官方
67
67
npm init @vitejs/app
68
68
```
69
69
70
- 接下来您可以 :
70
+ 接下来你可以 :
71
71
72
72
- 阅读 [ 指引文档] ( https://vitejs.dev/guide/ ) 了解 Vite 提供了哪些开箱即用的功能
73
- - 在 [ GitHub] ( https://github.com/vitejs/vite ) 上访问源代码
73
+ - 在 [ GitHub] ( https://github.com/vitejs/vite ) 上访问源码
74
74
- 在 [ Twitter] ( https://twitter.com/vite_js ) 上关注最新进展
75
75
- 或与其他 Vite 用户在 [ Discord] ( http://chat.vitejs.dev/ ) 上一起讨论
Original file line number Diff line number Diff line change @@ -526,7 +526,7 @@ export default ({ command, mode }) => {
526
526
527
527
默认情况下,Vite 会抓取你的 index.html 来检测需要预构建的依赖项。如果指定了 ` build.rollupOptions.input ` ,Vite 将转而去抓取这些入口点。
528
528
529
- 如果这两者都不适合您的需要 ,则可以使用此选项指定自定义条目 - 该值需要遵循 [ fast-glob 模式] ( https://github.com/mrmlnc/fast-glob#basic-syntax ) ,或者是相对于 vite 项目根的模式数组。这将覆盖掉默认条目推断。
529
+ 如果这两者都不适合你的需要 ,则可以使用此选项指定自定义条目 - 该值需要遵循 [ fast-glob 模式] ( https://github.com/mrmlnc/fast-glob#basic-syntax ) ,或者是相对于 vite 项目根的模式数组。这将覆盖掉默认条目推断。
530
530
531
531
### optimizeDeps.exclude
532
532
Original file line number Diff line number Diff line change 3
3
:::tip 注意
4
4
这里是客户端 HMR API。若要在插件中处理 HMR 更新,详见 [ handleHotUpdate] ( ./api-plugin#handlehotupdate ) .
5
5
6
- 手动 HMR API 主要用于框架和工具作者。作为最终用户,HMR 可能已经在特定于框架的启动器模板中为您处理过了 。
6
+ 手动 HMR API 主要用于框架和工具作者。作为最终用户,HMR 可能已经在特定于框架的启动器模板中为你处理过了 。
7
7
:::
8
8
9
9
Vite 通过特殊的 ` import.meta.hot ` 对象暴露手动 HMR API。
Original file line number Diff line number Diff line change @@ -20,7 +20,7 @@ document.getElementById('hero-img').src = imgUrl
20
20
21
21
- 如果 Vite 使用了 Vue 插件,Vue SFC 模板中的资源引用都将自动转换为导入。
22
22
23
- - 常见的图像、媒体和字体文件类型被自动检测为资源。您可以使用 [ ` assetsInclude ` 选项] ( /config/#assetsinclude ) 扩展内部列表。
23
+ - 常见的图像、媒体和字体文件类型被自动检测为资源。你可以使用 [ ` assetsInclude ` 选项] ( /config/#assetsinclude ) 扩展内部列表。
24
24
25
25
- 引用的资源作为构建资源图的一部分包括在内,将生成散列文件名,并可以由插件进行处理以进行优化。
26
26
@@ -64,15 +64,15 @@ import InlineWorker from './shader.js?worker&inline'
64
64
65
65
如果你有下列这些资源:
66
66
67
- - 不会被源代码引用 (例如 ` robots.txt ` )
67
+ - 不会被源码引用 (例如 ` robots.txt ` )
68
68
- 必须保持原有文件名(没有经过 hash)
69
- - ...或者您只是不想为了获取 URL 而首先导入该资源
69
+ - ...或者你只是不想为了获取 URL 而首先导入该资源
70
70
71
71
那么你可以将该资源放在一个特别的 ` public ` 目录中,它应位于你的项目根目录。该目录中的资源应该在开发时能直接通过 ` / ` 根路径访问到,并且打包时会被完整复制到目标目录的根目录下。
72
72
73
73
目录默认是 ` <root>/public ` ,但可以通过 [ ` publicDir ` 选项] ( /config/#publicdir ) 来配置。
74
74
75
75
请注意:
76
76
77
- - 引入 ` public ` 中的资源永远应该使用根绝对路径 - 举个例子,` public/icon.png ` 应该在源代码中被引用为 ` /icon.png ` 。
77
+ - 引入 ` public ` 中的资源永远应该使用根绝对路径 - 举个例子,` public/icon.png ` 应该在源码中被引用为 ` /icon.png ` 。
78
78
- ` public ` 中的资源不应该被 JavaScript 文件引用。
Original file line number Diff line number Diff line change 23
23
24
24
- 相关内容:[ 静态资源处理] ( ./assets )
25
25
26
- 如果您正在嵌套的公共路径下部署项目 ,可以简单指定一个 [ ` build.base ` 配置项] ( /config/#base ) 然后所有资源的路径都将据此重写。这个选项也可以通过命令行参数指定,例如 ` vite build --base=/my/public/path/ ` 。
26
+ 如果你正在嵌套的公共路径下部署项目 ,可以简单指定一个 [ ` build.base ` 配置项] ( /config/#base ) 然后所有资源的路径都将据此重写。这个选项也可以通过命令行参数指定,例如 ` vite build --base=/my/public/path/ ` 。
27
27
28
28
由 JS 导入的资源路径,CSS 中的 ` url() ` 引用,和 ` .html ` 文件中的资源引用在构建过程中都会自动调整以适配此选项。
29
29
@@ -44,7 +44,7 @@ module.exports = {
44
44
}
45
45
```
46
46
47
- 例如,您可以使用仅在构建期间应用的插件来指定多个 Rollup 输出。
47
+ 例如,你可以使用仅在构建期间应用的插件来指定多个 Rollup 输出。
48
48
49
49
## 多页面应用模式
50
50
@@ -82,7 +82,7 @@ module.exports = {
82
82
83
83
## 库模式
84
84
85
- 当您开发面向浏览器的库时,您可能会将大部分时间花在该库的测试 /演示页面上。使用 Vite,你可以使用 ` index.html ` 来获得如丝般顺滑的开发体验。
85
+ 当你开发面向浏览器的库时,你可能会将大部分时间花在该库的测试 /演示页面上。使用 Vite,你可以使用 ` index.html ` 来获得如丝般顺滑的开发体验。
86
86
87
87
当需要构建你的库用于发布时,请使用 [ ` build.lib ` 配置项] ( /config/#build-lib ) ,请确保将你不想打包进你库中的依赖进行外部化,例如 ` vue ` 或 ` react ` :
88
88
Original file line number Diff line number Diff line change @@ -39,7 +39,7 @@ Vite 最初是作为 [Vue.js](https://vuejs.org/) 开发工具的未来基础而
39
39
40
40
Preact 团队的 [ WMR] ( https://github.com/preactjs/wmr ) 提供了类似的特性集,而 Vite 2.0 对 Rollup 插件接口的支持正是受到了它的启发。
41
41
42
- WMR 主要是为了 [ Preact] ( https://preactjs.com/ ) 项目而设计,并为其提供了集成度更高的功能,比如预渲染。就使用范围而言,它更加贴合于 Preact 框架,与 Preact 本身一样强调紧凑的大小。如果您正在使用 Preact,那么 WMR 可能会提供更好的体验。然而,WMR 不太可能优先支持其他框架。
42
+ WMR 主要是为了 [ Preact] ( https://preactjs.com/ ) 项目而设计,并为其提供了集成度更高的功能,比如预渲染。就使用范围而言,它更加贴合于 Preact 框架,与 Preact 本身一样强调紧凑的大小。如果你正在使用 Preact,那么 WMR 可能会提供更好的体验。然而,WMR 不太可能优先支持其他框架。
43
43
44
44
## @web/dev-server
45
45
Original file line number Diff line number Diff line change @@ -30,20 +30,20 @@ Pre-bundling them to speed up dev server page load...(将预构建它们以提
30
30
31
31
## 自动依赖搜寻
32
32
33
- 如果没有找到存在的缓存,Vite 将抓取你的源代码 ,并自动发现依赖项导入(即
33
+ 如果没有找到存在的缓存,Vite 将抓取你的源码 ,并自动发现依赖项导入(即
34
34
"裸引入",期望从 ` node_modules ` 解析),并使用这些发现的导入作为预构建包的入口点。预绑定是用 ` esbuild ` 执行的,所以它通常非常快。
35
35
36
36
在服务器已经启动之后,如果在缓存中没有遇到新的依赖项导入,Vite 将重新运行依赖构建进程并重新加载页面。
37
37
38
38
## Monorepo 和链接依赖
39
39
40
- 在一个 monorepo 启动中,该仓库中的某个依赖可能会成为另一个包的依赖。Vite 会自动侦测没有从 ` node_modules ` 解析的依赖项,并将链接的依赖视为源代码 。它不会尝试打包被链接的依赖,而是会分析被链接依赖的依赖列表。
40
+ 在一个 monorepo 启动中,该仓库中的某个依赖可能会成为另一个包的依赖。Vite 会自动侦测没有从 ` node_modules ` 解析的依赖项,并将链接的依赖视为源码 。它不会尝试打包被链接的依赖,而是会分析被链接依赖的依赖列表。
41
41
42
42
## 自定义行为
43
43
44
- 默认的依赖项发现为启发式可能并不总是可取的。在您想要显式地从列表中包含 /排除依赖项的情况下, 请使用 [ ` optimizeDeps ` 配置项] ( /config/#依赖优化选项 ) 。
44
+ 默认的依赖项发现为启发式可能并不总是可取的。在你想要显式地从列表中包含 /排除依赖项的情况下, 请使用 [ ` optimizeDeps ` 配置项] ( /config/#依赖优化选项 ) 。
45
45
46
- 一个典型的用例对 ` optimizeDeps.include ` 或 ` optimizeDeps.exclude ` 是当您有一个不能直接在源代码中发现的导入时 。例如,导入可能是插件转换的结果。这意味着 Vite 无法在初始扫描时发现导入 —— 它只能在浏览器请求文件并进行转换后发现它。这将导致服务器在启动后立即重新打包。
46
+ 一个典型的用例对 ` optimizeDeps.include ` 或 ` optimizeDeps.exclude ` 是当你有一个不能直接在源码中发现的导入时 。例如,导入可能是插件转换的结果。这意味着 Vite 无法在初始扫描时发现导入 —— 它只能在浏览器请求文件并进行转换后发现它。这将导致服务器在启动后立即重新打包。
47
47
48
48
` include ` 和 ` exclude ` 都可以用来处理这个问题。如果依赖项很大(包含很多内部模块)或者是 CommonJS,那么你应该包含它;如果依赖项很小,并且已经是有效的 ESM,则可以排除它,让浏览器直接加载它。
49
49
Original file line number Diff line number Diff line change @@ -33,7 +33,7 @@ Vite 使用 [dotenv](https://github.com/motdotla/dotenv) 在你的项目根目
33
33
.env.[mode].local # 只在指定模式下加载,但会被 git 忽略
34
34
```
35
35
36
- 加载的环境变量也会通过 ` import.meta.env ` 暴露给客户端源代码 。
36
+ 加载的环境变量也会通过 ` import.meta.env ` 暴露给客户端源码 。
37
37
38
38
为了防止意外地将一些环境变量泄漏到客户端,只有以 ` VITE_ ` 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这个文件中:
39
39
@@ -42,13 +42,13 @@ DB_PASSWORD=foobar
42
42
VITE_SOME_KEY=123
43
43
```
44
44
45
- 只有 ` VITE_SOME_KEY ` 会被暴露为 ` import.meta.env.VITE_SOME_KEY ` 提供给客户端源代码 ,而 ` DB_PASSWORD ` 则不会。
45
+ 只有 ` VITE_SOME_KEY ` 会被暴露为 ` import.meta.env.VITE_SOME_KEY ` 提供给客户端源码 ,而 ` DB_PASSWORD ` 则不会。
46
46
47
47
:::warning 安全警告
48
48
49
49
- ` .env.*.local ` 文件应是本地的,可以包含敏感变量。你应该加上 ` .local ` 到你的 ` .gitignore ` 以避免他们被检出到 git。
50
50
51
- - 由于暴露在 Vite 源代码中的任何变量都将最终出现在客户端包中 ,` VITE_* ` 变量应该不包含任何敏感信息。
51
+ - 由于暴露在 Vite 源码中的任何变量都将最终出现在客户端包中 ,` VITE_* ` 变量应该不包含任何敏感信息。
52
52
53
53
:::
54
54
@@ -65,9 +65,9 @@ VITE_APP_TITLE=My App
65
65
66
66
在你的应用中,你可以使用 ` import.meta.env.VITE_APP_TITLE ` 作为渲染标题。
67
67
68
- 然而重要的是,要理解** 模式** 是一个更广泛的概念,而不仅仅是开发和生产。一个典型的例子是,您可能希望有一个 “staging” 模式,它应该具有类似于生产的行为,但环境变量与生产环境略有不同。
68
+ 然而重要的是,要理解** 模式** 是一个更广泛的概念,而不仅仅是开发和生产。一个典型的例子是,你可能希望有一个 “staging” 模式,它应该具有类似于生产的行为,但环境变量与生产环境略有不同。
69
69
70
- 您可以通过传递 ` --mode ` 选项标志来覆盖命令使用的默认模式。例如,如果你想为我们假设的 staging 模式构建应用:
70
+ 你可以通过传递 ` --mode ` 选项标志来覆盖命令使用的默认模式。例如,如果你想为我们假设的 staging 模式构建应用:
71
71
72
72
``` bash
73
73
vite build --mode staging
Original file line number Diff line number Diff line change @@ -145,7 +145,7 @@ Vite 为 Sass 和 Less 改进了 `@import` 解析,因而 Vite 别名也同样
145
145
146
146
由于与其 API 冲突,` @import ` 别名和 URL 变基不支持 Stylus。
147
147
148
- 您还可以通过在文件扩展名前加上 ` .module ` 来结合使用 CSS modules 和预处理器,例如 ` style.module.scss ` 。
148
+ 你还可以通过在文件扩展名前加上 ` .module ` 来结合使用 CSS modules 和预处理器,例如 ` style.module.scss ` 。
149
149
150
150
## 静态资源处理
151
151
You can’t perform that action at this time.
0 commit comments