Vue多环境配置之.env配置文件详解

什么是.env配置文件

.env配置文件是对不同环境下的应用程序进行配置的文件。它不应该存在于版本控制系统中，因为该文件可能包含敏感信息，比如数据库密码、API密钥等。

在Vue项目中，.env是一个前缀为名字的文件，其中的变量可以在应用程序中访问。在不同环境下，可以创建不同的.env文件。Webpack在打包过程中，会将.env文件中的变量替换为实际的值。

.env文件的语法

一个.env文件由多个key=value的语句组成。语句之间使用\n或\r\n分隔。#或;可以作为注释，注释以行末结束。在值中，可以使用引号，但是不建议这样做。

例如：

DB_NAME=my_db
DB_HOST=localhost:3306
DB_USER=db_user
DB_PASSWORD=123456
# This is a comment
# AUTH_KEY=abc123

如何在Vue应用程序中使用.env文件

在Vue应用程序中，可以使用process.env对象来访问.env文件中的变量。

例如，在Vue组件中使用process.env对象中的VUE_APP_NAME变量：

export default {
  data () {
    return {
      name: process.env.VUE_APP_NAME
    }
  }
}

在Vue CLI4中，.env文件的变量需要以VUE_APP_开头才能被识别。

如何在不同环境中使用不同的.env文件

在Vue CLI4中，可以使用不同名称的.env文件来关联不同的环境。Vue CLI4将按优先级查找文件；.env.local是在所有环境中都被加载的本地文件（.env.local需要被添加到.gitignore中）；.env.[mode].local是在命名为mode的环境下加载的本地文件。

假设有三种环境：开发环境（development）、生产环境（production）和测试环境（testing）。在这些环境下，可以使用以下.env文件：

.env.development // 开发环境
VUE_APP_NAME=My Development App
VUE_APP_API_URL=https://dev.api.example.com

.env.production // 生产环境
VUE_APP_NAME=My Production App
VUE_APP_API_URL=https://api.example.com

.env.testing // 测试环境
VUE_APP_NAME=My Testing App
VUE_APP_API_URL=https://test.api.example.com

示例1：如果在生产环境下运行应用程序,在控制台打印出.env文件中定义的VUE_APP_NAME的值，可以通过以下命令进行：

console.log(process.env.VUE_APP_NAME);

该命令将输出：My Production App。

示例2：在开发环境下，需要变量DEBUG为true，可以在.env.development文件中添加：

DEBUG=true

在代码中，可以使用process.env.DEBUG来访问该变量的值。