vue3+vite项目中使用.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 中，避免将敏感信息提交到版本控制系统中。