vue项目中的.env文件加载方式

目录

• 一、情况变量和模式
• 1. 情况变量
• 2. 生产情况更换
• 二、.env 文件
• 1. 根本用法
• 2. TypeScript 的智能提示
• 三、模式
• 1. 根本用法
• 总结

一、情况变量和模式

1. 情况变量

Vite 在一个特殊的 import.meta.env 对象上暴露情况变量。

这里有一些在所有情况下都可以使用的内建变量：

• [code]import.meta.env.MODE: {string}[/code] 应用运行的模式，该变量值就是你当前运行的 .env.{MODE}文件，比方：值为dev时，使用的就是 .env.dev这个文件
• [code]import.meta.env.BASE_URL: {string}[/code] 部署应用时的根本 URL。他由base 配置项决定这个值就是你在vite.config.js中定义的base的值
• [code]import.meta.env.PROD: {boolean}[/code] 应用是否运行在生产情况
• [code]import.meta.env.DEV: {boolean}[/code] 应用是否运行在开发情况 (永远与 import.meta.env.PROD相反)
• [code]mport.meta.env.SSR: {boolean}[/code] 应用是否运行在 server 上

2. 生产情况更换

在生产情况中，这些情况变量会在构建时被静态更换，因此，在引用它们时请使用完全静态的字符串。动态的 key 将无法生效。比方，动态 key 取值 import.meta.env[key] 是无效的。

它还将更换出如今 JavaScript 和 Vue 模板中的字符串。这本应是非常少见的，但也大概是不警惕为之的。

在这种情况下你大概会看到类似 Missing Semicolon 或 Unexpected token 等错误，比方当 “process.env.NODE_ENV” 被更换为 "“development”: "。

有一些方法可以避免这个问题：

• 对于 JavaScript 字符串，你可以使用 unicode 零宽度空格来分割这个字符串，比方： ‘import.meta\u200b.env.MODE’
• 对于 Vue 模板或其他编译到 JavaScript 字符串的 HTML，你可以使用 <wbr> 标签，比方：import.meta.<wbr>env.MODE

二、.env 文件

1. 根本用法

Vite 使用 dotenv 从你的 情况目录 中的下列文件加载额外的情况变量：

情况加载优先级

• 一份用于指定模式的文件（比方 .env.production）会比通用形式的优先级更高（比方 .env）。
• 别的，Vite 实验时已经存在的情况变量有最高的优先级，不会被 .env 类文件覆盖。比方当运行 VITE_SOME_KEY=123 vite build 的时间。
• .env 类文件会在 Vite 启动一开始时被加载，而改动会在重启服务器后生效。

加载的情况变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。

为了防止意外地将一些情况变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。比方下面这些情况变量：

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。

请留意，假如想要在情况变量中使用 $ 符号，则必须使用 \ 对其进行转义。

假如你想自定义 env 变量的前缀，请参阅 envPrefix。

安全留意事项

• .env.*.local 文件应是当地的，可以包含敏感变量。你应该将 .local 添加到你的 .gitignore 中，以避免它们被 git 检入。
• 由于任何暴露给 Vite 源码的变量最终都将出如今客户端包中，VITE_* 变量应该不包含任何敏感信息。

2. TypeScript 的智能提示

默认情况下，Vite 在 vite/client.d.ts 中为 import.meta.env 提供了类型定义。

随着在 .env[mode] 文件中自定义了越来越多的情况变量，你大概想要在代码中获取这些以 VITE_ 为前缀的用户自定义情况变量的 TypeScript 智能提示。

要想做到这一点，你可以在 src 目录下创建一个 env.d.ts 文件，接着按下面这样增加 ImportMetaEnv 的定义：

三、模式

1. 根本用法

默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式。

这意味着当实验 vite build 时，它会自动加载 .env.production 中大概存在的情况变量：

在你的应用中，你可以使用 import.meta.env.VITE_APP_TITLE 渲染标题。

在某些情况下，若想在 vite build 时运行不同的模式来渲染不同的标题，你可以通过通报 --mode 选项标志来覆盖命令使用的默认模式。

比方，假如你想在 staging （预发布）模式下构建应用：

还需要新建一个 .env.staging 文件：

由于 vite build 默认运行生产模式构建，你也可以通过使用不同的模式和对应的 .env 文件配置来改变它，用以运行开发模式的构建：

本文内容源自vite官方文档

总结

以上为个人履历，盼望能给大家一个参考，也盼望大家多多支持脚本之家。