Vue.js 如何在Vue-cli3中覆盖环境变量

在本文中，我们将介绍如何在Vue-cli3中覆盖环境变量。Vue-cli3是一个基于Vue.js的脚手架工具，用于快速搭建Vue.js项目的开发环境。环境变量是在项目中设置的全局变量，可以用于在不同环境中配置应用程序的不同参数。

阅读更多：Vue.js 教程

什么是环境变量

环境变量是在应用程序运行时设置的全局变量。在Vue.js项目中，我们可以使用环境变量来配置应用程序的不同参数，如API的URL地址、后端服务的主机名、端口号等。使用环境变量可以实现开发、测试和生产等不同环境之间的灵活配置。

在Vue-cli3中，我们可以通过定义不同的环境文件来设置不同的环境变量。默认情况下，Vue-cli3提供了三个环境文件：.env、.env.development和.env.production。其中，.env是所有环境通用的配置文件，.env.development是开发环境的配置文件，.env.production是生产环境的配置文件。

如何覆盖环境变量

在Vue-cli3中，我们可以通过编辑.env文件来覆盖默认的环境变量。首先，我们需要在项目的根目录下创建一个.env文件。然后，我们可以在.env文件中按照key=value的格式定义环境变量。

例如，我们想要覆盖默认的API地址，我们可以在.env文件中添加以下内容：

VUE_APP_API_URL = 'http://api.example.com'

在应用程序的代码中，我们可以使用process.env.VUE_APP_API_URL来访问这个环境变量。例如，在Vue组件中，我们可以这样使用：

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

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

这样，我们就可以在不同的环境中通过修改.env文件来动态配置应用程序的API地址。

如何使用不同的环境文件

除了默认的.env文件，Vue-cli3还提供了.env.development和.env.production两个环境文件。我们可以在开发环境和生产环境中分别使用这两个文件来设置不同的环境变量。

在开发环境中，我们可以在.env.development文件中定义开发环境所需的环境变量。例如，我们可以设置开发环境的API地址为测试服务器的地址：

VUE_APP_API_URL = 'http://test.example.com'

在生产环境中，我们可以在.env.production文件中定义生产环境所需的环境变量。例如，我们可以设置生产环境的API地址为正式服务器的地址：

VUE_APP_API_URL = 'http://api.example.com'

在运行Vue-cli3脚本时，默认使用的是.env文件中的环境变量。如果我们希望使用其他环境文件中的环境变量，可以在脚本命令后面加上--mode参数，指定使用的环境文件。例如，我们可以使用以下命令运行开发环境：

vue-cli-service serve --mode development

这样，Vue-cli3将会读取.env.development文件中的环境变量。

环境变量的优先级

在Vue-cli3中，如果同时定义了相同key的环境变量，它们的优先级如下：

1. 在命令行中通过--env参数传递的环境变量，优先级最高；
2. 在环境文件中定义的环境变量，其优先级次之；
3. 在默认的.env文件中定义的环境变量，其优先级最低。

例如，如果我们在命令行中传递了一个环境变量：

vue-cli-service build --mode production --env VUE_APP_API_URL=http://custom.example.com

这个环境变量将会覆盖.env或.env.production文件中定义的同名环境变量。

示例说明

假设我们有一个Vue.js项目，需要根据不同环境配置API地址。在开发环境中，我们希望使用测试服务器的API地址，在生产环境中，我们希望使用正式服务器的API地址。

首先，在项目根目录下创建.env.development文件，定义开发环境的API地址：

VUE_APP_API_URL = 'http://test.example.com'

然后，在.env.production文件中定义生产环境的API地址：

VUE_APP_API_URL = 'http://api.example.com'

在代码中，我们可以通过process.env.VUE_APP_API_URL来访问这个环境变量。例如，在使用axios发送HTTP请求的模块中，我们可以这样设置API地址：

import axios from 'axios';

const api = axios.create({
  baseURL: process.env.VUE_APP_API_URL
});

export default api;

这样，我们就能在不同的环境中使用不同的API地址了。

总结

在Vue-cli3中，我们可以通过覆盖环境变量来配置应用程序的不同参数。通过编辑.env文件或使用.env.development和.env.production文件，我们可以在不同环境中设置不同的环境变量。使用环境变量可以实现开发、测试和生产等不同环境之间的灵活配置。

在使用环境变量时，需要注意环境变量的优先级。通过命令行参数或环境文件定义的环境变量具有更高的优先级，可以覆盖默认的.env文件中的环境变量。

希望本文能帮助你了解如何在Vue-cli3中覆盖环境变量，并在开发中灵活配置应用程序的不同参数。