Vue CLI 项目中环境变量的配置方法详解

在使用 Vue CLI 创建的项目中，合理配置环境变量是一项非常重要的工作，它能够帮助我们在不同的开发、测试和生产环境中灵活地设置项目参数，如 API 地址、密钥等。下面将详细介绍如何在 Vue CLI 项目中配置环境变量。

环境变量的类型

Vue CLI 支持两种类型的环境变量：

公开的环境变量

以 VUE_APP_ 为前缀命名的环境变量会通过 process.env 暴露给客户端 JavaScript。例如，VUE_APP_API_URL 可以在 Vue 组件中通过 process.env.VUE_APP_API_URL 访问到，常用于配置像 API 地址这样需要在前端代码中使用的信息。

仅在 Node.js 中使用的环境变量

这些环境变量不会暴露给客户端，只在构建过程或 Node.js 运行时的后端逻辑中可用。比如设置构建相关的参数等。

配置方法

开发环境配置

在 Vue CLI 项目根目录下创建一个 .env.development 文件。在这个文件中定义开发环境所需的环境变量，格式为 KEY=VALUE。例如：

VUE_APP_API_URL=http://localhost:3000/api

这里设置了开发环境下的 API 地址。注意，不需要使用引号包裹值。

生产环境配置

同样在项目根目录下创建 .env.production 文件，用于配置生产环境的变量。例如：

VUE_APP_API_URL=https://example.com/api

当使用 vue-cli-service build 命令构建生产版本时，Vue CLI 会自动加载 .env.production 文件中的环境变量。

全局通用配置

如果有一些环境变量在所有环境中都通用，可以创建一个 .env 文件进行配置。不过需要注意，这个文件中的变量优先级低于 .env.development 和 .env.production 中同名变量。

在代码中使用环境变量

在 Vue 组件中，可以通过 process.env 访问配置的环境变量。例如：

<template>
  <div>
    <p>API 地址: {{ apiUrl }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: process.env.VUE_APP_API_URL
    };
  }
};
</script>

在 Node.js 相关的代码（如 vue.config.js 等配置文件）中，也可以通过 process.env 来获取环境变量，以便根据不同环境进行不同的配置。

注意事项

1. 变量命名规范：严格遵循 VUE_APP_ 前缀来定义要暴露给客户端的环境变量，否则不会生效。
2. 安全性：不要在公开的环境变量中存储敏感信息，如密码等，因为它们会暴露给客户端。
3. 变量优先级：特定环境的 .env 文件（如 .env.development）中的变量优先级高于通用的 .env 文件中的同名变量。

通过以上方法，我们可以在 Vue CLI 项目中灵活、高效地配置和使用环境变量，以适应不同的开发和部署场景。

本文链接：https://blog.runxinyun.com/post/575.html 转载需授权！

网站名称： 润信云资讯网
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！邮件：7104314@qq.com
网站部分内容来源于网络，版权争议与本站无关。请在下载后的24小时内从您的设备中彻底删除上述内容。
如无特别声明本文即为原创文章仅代表个人观点，版权归《润信云资讯网》所有，欢迎转载，转载请保留原文链接。