1.常见的构建工具( 二 ) _变量

.env文件
Vite 使用从你的环境目录中的下列文件加载额外的环境变量：
.env# 所有情况下都会加载.env.local# 所有情况下都会加载，但会被 git 忽略.env.[mode]# 只在指定模式下加载.env.[mode].local# 只在指定模式下加载，但会被 git 忽略
加载的环境变量也会通过 .meta.env 暴露给客户端源码
为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这个文件中：
DB_PASSWORD=foobarVITE_SOME_KEY=123
只有会被暴露为 .meta.env. 提供给客户端源码，而则不会
如果想自定义配置变量前缀, 可以使用配置项
export default defineConfig({envPrefix: 'My' // 以My开头的变量才会暴露给经过 vite 处理的代码})
注意：
安全注意事项
.env..local 文件应是本地的，可以包含敏感变量。你应该将 .local 添加到你的 . 中，以避免它们被 git 检入。
由于任何暴露给 Vite 源码的变量最终都将出现在客户端包中，VITE_ 变量应该不包含任何敏感信息。
的智能提示
默认情况下，Vite 在 vite/.d.ts中为 .meta.env 提供了类型定义。随着在 .env[mode] 文件中自定义了越来越多的环境变量，你可能想要在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的智能提示。
要想做到这一点，你可以在 src 目录下创建一个env.d.ts 文件，接着按下面这样增加的定义：
/// interface ImportMetaEnv {readonly VITE_APP_TITLE: string// 更多环境变量...}interface ImportMeta {readonly env: ImportMetaEnv}
模式
默认情况下，开发服务器 (dev 命令) 运行在(开发) 模式，而 build 以及 serve 命令则运行在(生产) 模式。
这意味着当执行 vite build 时，它会自动加载 .env. 中可能存在的环境变量：
.env.productionVITE_APP_TITLE=My App
在你的应用中，你可以使用 .meta.env. 渲染标题。
然而，重要的是要理解模式是一个更广泛的概念，而不仅仅是开发和生产。一个典型的例子是，你可能希望有一个 “” (预发布|预上线) 模式，它应该具有类似于生产的行为，但环境变量与生产环境略有不同。

文章插图
你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。例如，如果你想为我们假设的模式构建应用：
vite build --mode staging
为了使应用实现预期行为，我们还需要一个 .env. 文件：
.env.
NODE_ENV=productionVITE_APP_TITLE=My App (staging)
现在，你的应用应该具有类似于生产的行为，但显示的标题与生产环境不同。
3.静态资源处理将资源引入为 URL
服务时引入一个静态资源会返回解析后的公共路径：
import imgUrl from './img.png'document.getElementById('hero-img').src = http://www.kingceram.com/post/imgUrl
例如，在开发时会是 /img.png，在生产构建后会是 //img..png
行为类似于的 file-，区别在于导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可以使用相对路径
目录
如果你有下列这些资源：