思潮课程 / 前端开发 / 正文

vue 环境变量, 环境变量的基本概念

2025-01-06前端开发阅读 5

1. 在项目根目录下，你能够创立以下文件来界说不同环境的环境变量： `.env.local`：一直被加载，但会被 `gitignore` 疏忽。 `.env`：在所有情况下都会被加载。 `.env.development`：在 `NODE_ENV` 被设置为 `development` 时加载。 `.env.test`：在 `NODE_ENV` 被设置为 `test` 时加载。 `.env.production`：在 `NODE_ENV` 被设置为 `production` 时加载。

2. 环境变量文件中的每个变量都应该遵从 `VUE_APP_` 的前缀。例如，`VUE_APP_API_URL=http://example.com`。

3. 你能够在代码中经过 `process.env.VUE_APP_API_URL` 来访问这些变量。

4. 在 `webpack` 装备中，环境变量也会被主动注入到客户端的打包文件中。

5. 关于灵敏信息，如 API 密钥，你不应该将它们直接放在 `.env` 文件中，而是应该运用环境变量或更安全的存储方法。

6. 你能够运用 `vuecliservice` 的 `mode` 选项来指定要运用哪个环境变量文件。例如，`vuecliservice build mode production` 会运用 `.env.production` 文件中的变量。

7. 在 Vue 组件或实例中，你能够运用 `process.env.VUE_APP_API_URL` 来访问环境变量。

8. 在 `webpack` 装备文件中，你能够运用 `DefinePlugin` 来界说环境变量。

9. 保证你的 `.env` 文件不会被提交到版别控制系统中，一般需求将它们添加到 `.gitignore` 文件中。

10. 假如你需求在不同环境中运用不同的构建装备，你能够创立不同的 `vue.config.js` 文件，并在 `vuecliservice` 指令中运用 `config` 选项来指定运用哪个装备文件。

11. 在 `package.json` 中的 `scripts` 部分，你能够为不同的环境设置不同的指令。例如： ```json scripts: { serve: vuecliservice serve build: vuecliservice build build:prod: vuecliservice build mode production build:test: vuecliservice build mode test } ```

12. 你能够运用 `crossenv` 包来跨渠道设置环境变量。例如，在 Windows 上，你能够运用 `set NODE_ENV=production