process.env 管理 Vue 项目的环境变量（Vue项目中环境变量的配置及调用）

news/2024/7/8 9:15:51 标签: vue.js

简述：在构建 Vue 应用时，管理配置是开发中的一个重要部分。不同的环境（如开发、测试和生产）往往需要不同的配置，例如 API、 基础 URL、第三方服务的密钥等。使用环境变量可以帮助我们更好地管理这些配置。这里将介绍如何在 Vue 项目中使用 process.env 来管理环境变量。这里来记录一下

⭐什么是 process.env？

process.env 是 Node.js 的一个全局对象，它包含了系统环境变量。这些变量可以在应用程序的运行时访问，允许开发人员根据不同的环境设置不同的配置。通过使用 process.env 管理环境变量，可以使 Node.js 应用程序的配置更加灵活和安全。

⭐为什么要在项目中使用环境变量？

环境变量在项目中的使用有多个重要原因，包括安全性、灵活性和配置管理。以下是详细解释：

1. 安全性

将敏感信息如 API 密钥、数据库密码和其他机密数据存储在环境变量中，可以显著提高应用的安全性。避免将这些敏感信息硬编码在源代码中可以减少数据泄露的风险：

  • 避免暴露机密：环境变量使得敏感信息不直接出现在代码库中，降低了信息泄露的风险。
  • 保护配置文件：通过环境变量可以避免将敏感配置暴露在版本控制系统中，从而增强了代码的安全性。

2. 灵活性

环境变量提供了灵活的配置管理方式，使得在不同的环境中使用不同的配置变得更加方便：

  • 无缝切换环境：通过设置不同的环境变量，可以轻松地在开发、测试、预生产和生产环境之间切换，而无需修改代码。
  • 减少代码修改：只需更改环境变量而不是修改代码文件，可以迅速调整配置，以适应不同的需求和环境。

3. 配置管理

环境变量提供了一种统一的配置管理方式，使得应用程序的配置更加可控和一致：

  • 集中管理：将所有环境配置集中在环境变量中，使得管理和维护配置变得更加简洁和高效。
  • 环境隔离：不同的环境可以有独立的配置文件，确保在一个环境中的设置不会影响到其他环境。
  • 简化部署：在部署时，只需根据目标环境加载相应的环境变量文件，从而简化了配置和部署过程。

⭐如何在 Vue 项目中使用环境变量？

一. 创建环境文件

在 Vue 项目根目录下，可以创建多个环境文件，例如：

.env                                    默认环境配置

.env.development               开发环境配置

.env.test：                          测试环境配置

.env.staging                        预生产环境配置

.env.production                   生产环境配置

这些文件的内容格式如下：

VUE_APP_API_URL=https://api.example.com


VUE_APP_SECRET_KEY=your_secret_key

这里所有自定义环境变量的名称必须以 VUE_APP_ 为前缀。Vue CLI 只会嵌入以 VUE_APP_ 为前缀的变量，以确保这些变量不会泄露应用程序运行时所需的其他环境变量。

二. 配置不同环境的变量

根据不同的环境，可以在相应的环境文件中配置不同的变量。例如：

在 .env.development 中：

VUE_APP_API_URL=https://dev.api.example.com


VUE_APP_SECRET_KEY=dev_secret_key

在 .env.test 中：

VUE_APP_API_URL=https://test.api.example.com


VUE_APP_SECRET_KEY=test_secret_key

在 .env.staging 中：

VUE_APP_API_URL=https://staging.api.example.com


VUE_APP_SECRET_KEY=staging_secret_key

在 .env.production 中：

VUE_APP_API_URL=https://api.example.com


VUE_APP_SECRET_KEY=prod_secret_key

三. 在 JS 文件中访问环境变量

在 Vue 组件或 JavaScript 文件中，可以通过 process.env 对象来访问这些环境变量。例如：

// 获取当前环境变量 NODE_ENV 的值，通常用于区分不同的运行环境（如开发、测试、生产）。
const env = process.env.NODE_ENV;

console.log(`Running in ${env} mode`);

这里从 process.env 对象中获取名为 NODE_ENV 的环境变量的值，并将其赋值给 env 变量。这里使用模板字符串打印出当前的运行环境模式。假设 NODE_ENV 的值是 development，这行代码将输出 Running in development mode。

四. 启动应用时加载环境变量

当你启动 Vue 应用时，Vue CLI 会根据当前环境自动加载相应的环境文件。例如：

npm run serve # 会加载 .env 和 .env.development 文件


npm run build # 会加载 .env 和 .env.production 文件

  • npm run serve：在开发模式下启动开发服务器时，Vue CLI 会默认加载 .env 和 .env.development 文件。这些文件中的环境变量会在开发过程中生效，用于配置开发环境所需的参数。

  • npm run build：在构建生产版本时，Vue CLI 会默认加载 .env 和 .env.production 文件。这些文件中的环境变量会在构建生产版本时生效，用于配置生产环境所需的参数。

当然需要额外配置，为了更好地管理不同环境的启动命令，我们可以在 package.json 中配置多种启动命令，这样可以更方便地在不同环境中启动和构建应用。以下是详细的配置方法：

配置 package.json

在 package.json 中配置不同环境的启动和构建命令。使用 cross-env 包来设置 NODE_ENV，以确保在不同操作系统上正确设置环境变量。

首先，安装 cross-env：

npm install cross-env --save-dev

// 或者

cnpm install cross-env --save-dev

然后，在 package.json 中添加如下脚本：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "serve:dev": "cross-env NODE_ENV=development vue-cli-service serve",
    "serve:test": "cross-env NODE_ENV=test vue-cli-service serve",
    "serve:staging": "cross-env NODE_ENV=staging vue-cli-service serve",
    "serve:prod": "cross-env NODE_ENV=production vue-cli-service serve",
    "build:dev": "cross-env NODE_ENV=development vue-cli-service build",
    "build:test": "cross-env NODE_ENV=test vue-cli-service build",
    "build:staging": "cross-env NODE_ENV=staging vue-cli-service build",
    "build:prod": "cross-env NODE_ENV=production vue-cli-service build"
  }
}

这些命令允许你在不同环境下启动和构建应用：

  • npm run serve:dev：启动开发环境
  • npm run serve:test：启动测试环境
  • npm run serve:staging：启动预生产环境
  • npm run serve:prod：启动生产环境
  • npm run build:dev：构建开发环境
  • npm run build:test：构建测试环境
  • npm run build:staging：构建预生产环境
  • npm run build:prod：构建生产环境

然后，确保正确加载环境文件

Vue CLI 会根据 NODE_ENV 自动加载相应的环境文件。例如：

  • 如果 NODE_ENV 设置为 development，Vue CLI 会加载 .env 和 .env.development 文件。
  • 如果 NODE_ENV 设置为 test，Vue CLI 会加载 .env 和 .env.test 文件。
  • 如果 NODE_ENV 设置为 staging，Vue CLI 会加载 .env 和 .env.staging 文件。
  • 如果 NODE_ENV 设置为 production，Vue CLI 会加载 .env 和 .env.production 文件。

通过创建不同的环境文件并配置启动命令，可以在 Vue 项目中轻松管理和加载不同环境的变量。这使得应用程序的配置更加灵活和安全，适用于开发、测试、预生产和生产等不同环境。

五. 使用环境变量配置 Axios 详细

假设我们使用 Axios 进行 HTTP 请求，可以使用环境变量配置 Axios 的基础 URL。步骤如下：

1. 安装 Axios

首先，我们需要安装 Axios 作为 HTTP 客户端工具：

npm install axios
// 或者
cnpm install axios

2. 创建 Axios 实例

接下来，我们创建一个 Axios 实例，并配置基础路径：

// 该文件目录：src/utils/request.js

// 引入 axios 库，用于发送 HTTP 请求
import axios from 'axios';

// 创建 Axios 实例
const service = axios.create({
  // ⭐使用 process.env. 环境变量配置基础路径
  // baseURL 指定了请求的基础 URL，通常从环境变量中读取
  baseURL: process.env.VUE_APP_BASE_API, 
  // 请求超时时间设置为 5000 毫秒（5 秒）
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前可以对请求进行配置，如添加请求头、修改请求参数等
    // 例如，可以在这里添加认证 token
    return config;
  },
  error => {
    // 请求错误时，打印错误信息
    console.error('请求错误:', error);
    // 返回一个拒绝的 Promise，以便处理请求错误
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 在收到响应数据后，可以对响应数据进行处理
    // 比如，可以在这里处理统一的响应格式
    return response.data;
  },
  error => {
    // 响应错误时，打印错误信息
    console.error('响应错误:', error);
    // 返回一个拒绝的 Promise，以便处理响应错误
    return Promise.reject(error);
  }
);

// 导出 Axios 实例，以便在其他模块中使用
export default service;

这里在配置baseURL时，直接使用process.env.VUE_APP_BASE_API来设置基本路径。在启动开发服务器，运行 npm run serve 时，Vue CLI 会加载 .env 和 .env.development 文件中的环境变量。此时，process.env.VUE_APP_BASE_API 的值会被设置为 .env.development 文件中定义的值，如果 .env.development 中没有定义，则使用 .env 文件中的值。

3. 创建 http.js 文件

并在 src/api 目录下创建一个 http.js 文件，并添加以下内容：

// 该文件目录：src/api/http.js

// 引入之前创建的 Axios 实例
import request from "@/utils/request";

/**
 * 获取图表数据的请求方法
 * @param {Object} data - 请求数据
 * @returns {Promise} - 返回一个 Promise 对象
 */
export function toDaySituation(data) {
    return request({
        url: '/res/situation/overview', // API 端点，指定了请求的路径
        method: 'post', // 请求方法，表示使用 POST 请求
        data // 请求数据，传递给 API 的请求体
    });
}

4. 在组件中调用请求方法

接下来，我们在组件中调用 callModelType方法，来请求图表数据并处理响应。例如：

// 请入请求数据的函数
import { toDayModeltype } from '@/api/http.js';

methods: {

    // 模型类型事件
    callModelType(value) {
      // 设置加载状态为 true
      this.tableLoading = true;

      // 调用 PatchList 方法并传递参数
      toDayModeltype(this.modelParams, this.params)
        .then((res) => {
          // 处理请求成功的情况
          if (res.code === 200) {
            // 设置延迟以模拟异步操作
            setTimeout(() => {
              this.tableLoading = false; // 将加载状态设置为 false
            }, 100);
            // 赋值操作，将获取的数据保存到变量
            const data = res.rows;     
          }
        })
        .catch(() => {
          // 处理请求失败的情况
          this.tableLoading = false; // 将加载状态设置为 false
        })
        .finally(() => {
          // 无论请求成功还是失败，都会执行这里的代码
          this.tableLoading = false; // 将加载状态设置为 false
        });
    },

},

created() {
    // 组件创建时调用 callModelType方法
    this.callModelType();
},

六. 在组件中使用环境变量

在 Vue 组件中，可以直接使用环境变量。例如：

<template>
  <div>
    <!-- 显示 API URL -->
    <p>API URL: {{ apiUrl }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 从环境变量中读取 API URL
      apiUrl: process.env.VUE_APP_API_URL, // 读取环境变量 VUE_APP_API_URL 的值
    };
  },
};
</script>

总结

通过在 Vue 项目中使用 process.env 管理环境变量，可以使配置管理更加灵活和安全。无论是在开发、测试、预生产还是生产环境中，环境变量都提供了一种有效的方法来管理应用程序的配置。


http://www.niftyadmin.cn/n/5536916.html

相关文章

【Leetcode 566】【Easy】重塑矩阵

【Leetcode 566】【Easy】重塑矩阵

目录 题目描述 整体思路 具体代码 题目描述&#xff1a; 原题链接 整体思路 首先要确保重塑后的矩阵内元素个数和原矩阵元素个数要相同&#xff0c;如果不同则原样返回原矩阵。 按行遍历顺序遍历原矩阵&#xff0c;设一个临时vector<int>存放新矩阵的每一行的元素…
阅读更多...
数字人大赋能未来治理新篇章，正宇软件助力人大建设新实践

数字人大赋能未来治理新篇章，正宇软件助力人大建设新实践

在全面贯彻落实党的二十大精神的开局之年&#xff0c;数字中国战略的深入实施如同一股强劲的东风&#xff0c;吹遍了神州大地的每一个角落。作为数字中国建设的重要组成部分&#xff0c;数字人大作为现代信息技术与人大工作深度融合的产物&#xff0c;正以其独特的魅力和深远的…
阅读更多...
Eureka Server集群数据一致性保障策略：深入解析与实践技巧

Eureka Server集群数据一致性保障策略：深入解析与实践技巧

Eureka Server集群数据一致性保障策略&#xff1a;深入解析与实践技巧 在微服务架构中&#xff0c;服务注册与发现是实现服务间通信的关键机制。Eureka&#xff0c;作为Netflix开源的服务注册与发现框架&#xff0c;其集群模式下的数据一致性问题尤为关键。本文将深入探讨Eure…
阅读更多...
机车自动换档系统的单片机设计方案

机车自动换档系统的单片机设计方案

在地铁工程建设中&#xff0c;工程用内燃机车&#xff08;简称工程车&#xff09;起到了非常重要的作用。尤其在地铁建设初期&#xff0c;由于需要运送大量的建筑材料&#xff0c;而初期的运输条件又比较简陋&#xff0c;因而工程车成为主要的运输工具。在地铁建成后的运营中&a…
阅读更多...
【大模型】大模型中的稀疏与稠密——一场效率与性能的较量

【大模型】大模型中的稀疏与稠密——一场效率与性能的较量

大模型中的稀疏与稠密——一场效率与性能的较量 深度解码&#xff1a;大模型中的稀疏与稠密——一场效率与性能的较量引言一、揭开面纱&#xff1a;何为稀疏与稠密&#xff1f;稠密模型&#xff1a;全连接的魅力稀疏模型&#xff1a;精简的力量 二、深度对比&#xff1a;稀疏与…
阅读更多...
2024攻防演练：亚信安全推出MSS/SaaS短期定制服务

2024攻防演练：亚信安全推出MSS/SaaS短期定制服务

随着2024年攻防演练周期延长的消息不断传出&#xff0c;各参与方将面临前所未有的挑战。面对强大的攻击队伍和日益严格的监管压力&#xff0c;防守单位必须提前进行全面而周密的准备和部署。为应对这一形势&#xff0c;亚信安全特别推出了为期三个月的MSS/SaaS短期订阅方案。该…
阅读更多...
【产品经理】订单处理12-订单的取消与反取消

【产品经理】订单处理12-订单的取消与反取消

在电商ERP系统中&#xff0c;订单取消与反取消也是常见功能之一。 订单取消与反取消也是电商ERP系统的常见功能&#xff0c;本次主要讲解下订单取消与反取消的逻辑。 一、订单取消 在电商ERP系统中&#xff0c;订单取消一般由审单员操作&#xff0c;此类取消一般是由于上下游…
阅读更多...
vue process.env.VUE_APP_BASE_API的相关配置及axios简单封装

vue process.env.VUE_APP_BASE_API的相关配置及axios简单封装

1、根目录底下新建.env.dev和env.prod,内容如下&#xff1a; VUE_APP_BASE_API http://192.168.1.xx:xxx2、vue.config相关内容&#xff1a; devServer: {hot: true, //热加载host: 0.0.0.0,port: 8080, //端口// https: false, //false关闭https&#xff0c;true为开启// op…
阅读更多...
最新文章

Copyright @ 2022~2023