手机网站建设制作教程曲靖seo建站
vue3+vite项目中使用.env文件环境变量方法
- .env文件作用
- 命名规则
- 常用的配置项示例
- 使用方法
- 注意事项
.env文件作用
- .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。
- Vite 会自动加载这些环境变量，并在构建时将它们替换为实际值。
-
必须在项目根目录创建
命名规则
- .env：所有环境都会加载的文件。
- .env.development：仅在开发环境加载。
- .env.production：仅在生产环境加载。
- .env.test：仅在测试环境加载。
常用的配置项示例
- NODE_ENV：指定当前的 Node.js 运行环境，常见值为 development（开发环境）、production（生产环境）和 test（测试环境）。
- VITE_APP_MODE：自定义的应用模式，可以根据需要设置不同的模式。
- VITE_APP_ROUTER_BASE：单页应用的基路径。如果应用部署在非根路径下（如 /app/），需要将此值设置为对应路径。
- VITE_APP_PUBLIC_URL：静态文件的基路径。确保静态资源（如图片、字体等）能够正确加载。
- VITE_APP_API_BASE_URL：API 请求的基准 URL。确保前端请求能够正确发送到后端服务。
- VITE_APP_PURE_CONSOLE：是否删除代码中的 console.log 语句。0 表示不启用，1 表示启用。
- VITE_APP_DROP_DEBUGGER：是否删除代码中的 debugger 语句。0 表示不启用，1 表示启用。
- VITE_APP_BUNDLE_ANALYZE：是否启用打包体积分析插件。0 表示不启用，1 表示启用。
使用方法
- 在项目中可以通过 import.meta.env.xxxx 来访问这些环境变量
console.log(import.meta.env.VITE_APP_API_BASE_URL)
注意事项
- 变量前缀：只有以 VITE_ 开头的变量才会被 Vite 替换并暴露给客户端代码。这是为了防止意外暴露敏感信息。
- 敏感信息：不要在 .env 文件中存储敏感信息（如 API 密钥、数据库密码等）。这些信息应该通过更安全的方式进行管理。
- .gitignore：确保 .env 文件被添加到 .gitignore 中，避免将敏感信息提交到版本控制系统中。