526互联

vue全家桶进阶之路49：Vue3 环境变量

发布时间 2023-04-21 15:13:54作者: 城南城南

vue3 环境变量

在Vue3中，可以通过环境变量来管理应用程序中的配置。这些配置可以包括后端API的URL、API key、跟踪ID等等。在不同的开发、测试、生产环境中使用不同的配置是非常有用的。Vue3允许使用.env、.env.local、.env.[mode]和.env.[mode].local文件来设置环境变量。

以下是环境变量的配置步骤：

  1. 创建环境变量文件

首先，需要在项目的根目录下创建.env文件，定义应用程序的环境变量，例如：

VUE_APP_BASE_URL=http://localhost:3000
VUE_APP_API_KEY=1234567890

 

其中，以VUE_APP_开头的变量是Vue3预定义的变量，可以在应用程序中通过process.env.VUE_APP_XXX来引用它们，例如process.env.VUE_APP_BASE_URL和process.env.VUE_APP_API_KEY。

  1. 创建模式文件

除了.env文件之外，还可以在项目根目录下创建.env.[mode]文件，其中[mode]表示开发模式、测试模式、生产模式等。例如，可以创建.env.development文件来定义开发模式下的环境变量。

  1. 引用环境变量

在Vue3应用程序中，可以通过process.env.VUE_APP_XXX来引用环境变量。例如，在组件中引用VUE_APP_BASE_URL：

export default {
  created() {
    const baseUrl = process.env.VUE_APP_BASE_URL
    console.log(baseUrl)
  }
}

这段代码的作用是在组件创建时，获取VUE_APP_BASE_URL环境变量并输出到控制台。

  1. 区分不同的环境

Vue3还允许通过process.env.NODE_ENV来判断当前的环境是开发、测试还是生产环境。在开发模式下，NODE_ENV的值为development，在生产模式下，NODE_ENV的值为production。例如，可以根据当前环境来输出不同的调试信息：

if (process.env.NODE_ENV === 'development') {
  console.log('This is a development environment.')
} else if (process.env.NODE_ENV === 'production') {
  console.log('This is a production environment.')
}

 

总结：

在Vue3中使用环境变量可以方便地管理应用程序中的配置，例如后端API的URL、API key等等。通过.env、.env.local、.env.[mode]和.env.[mode].local文件来设置环境变量，并可以通过process.env.VUE_APP_XXX来引用它们。同时，可以通过process.env.NODE_ENV来判断当前的环境是开发、测试还是生产环境。