.env文件在vue3,vite项目里怎么用
时间: 2024-10-09 11:12:12 浏览: 23
`.env` 文件在 Vue 3 和 Vite 项目中通常用于存储环境相关的敏感信息,比如 API 密钥、数据库连接字符串等,这些数据通常不想直接暴露在代码仓库中。以下是使用 `.env` 文件的基本步骤:
1. **创建 `.env` 文件**:
在项目根目录下创建一个名为 `.env` (或 `.env.local` 对于本地开发环境) 的隐藏文件,用于存放环境变量。
2. **配置环境变量**:
使用标准的键值对形式,例如 `VUE_APP_API_KEY=your-secret-key`。每个变量前面需要有前缀 `VUE_APP_` 或者其他自定义前缀,这有助于 Vite 自动识别哪些是应用级别的变量。
3. **启用加载**:
在 Vite 配置文件 `vite.config.js` 中,添加对 `.env` 文件的支持。添加以下代码到 `build` 属性中的 `define` 函数:
```javascript
import { defineConfig } from 'vite';
export default defineConfig({
build: {
//...
define: process.env.NODE_ENV !== 'production'
? process.env
: Object.fromEntries(
Object.entries(process.env)
.filter(([key]) => key.startsWith('VUE_APP_'))
.map(([key, val]) => [key.slice(7), JSON.stringify(val)])
),
//...
},
});
```
这样 Vite 就会在构建阶段读取并替换 `.env` 中的变量。
4. **在代码中访问**:
使用 `process.env.VUE_APP_VARIABLE_NAME` 的方式来获取变量的值,在组件、脚本或任何地方都可以这样引用。
阅读全文