深入探讨vite是如何解析 env文件的
更新时间:2023-09-30一、vite是什么
Vite是一个基于浏览器原生 ES 模块导入的开发服务器。通过利用浏览器去解析模块化 JavaScript 代码,尽可能的提前执行代码,使得应用启动更快。
二、vite如何解析.env文件
Vite 开发过程中,可以借助 .env 文件设置环境变量,通过process.env来访问。vite 支持使用三个不同名字的 .env 文件和 node.js 的 api 方法来区分不同的环境。 1. .env:默认被所有环境所读取 2. .env.development:只在 development 环境被读取 3. .env.production:只在 production 环境被读取 可以使用以下命令来传入不同的环境变量:
vite serve --mode development //传入 development 的环境变量 vite build --mode production //传入 production 的环境变量
三、示例代码
例如在 .env.development 中设置了以下的环境变量:
VITE_APP_TITLE=Hello Vite
在应用中可以通过 `process.env.VITE_APP_TITLE` 访问到环境变量。下面是示例代码:
console.log(process.env.VITE_APP_TITLE)
四、环境变量类型
vite 支持设置不同类型的环境变量:boolean、string、number等等。下面是示例代码:
//.env文件里 VITE_APP_DEBUG=true VITE_APP_PORT=8080 VITE_APP_VERSION=1.0
//some-file.js文件里 console.log(process.env.VITE_APP_DEBUG==='true') console.log(process.env.VITE_APP_PORT===8080) console.log(process.env.VITE_APP_VERSION==='1.0')
process.env 可以在任何位置访问,不必使用全局变量