vue中环境变量的使用与配置讲解

下面是关于"Vue中环境变量的使用与配置"的完整攻略。

什么是环境变量？

环境变量是操作系统中一种非常重要的概念，可以在系统运行时储存一些重要的值，其作用类似于代码中定义的全局变量。在Vue中，我们可以使用环境变量来配置不同环境下的地址、密钥等敏感信息。

环境变量的配置

在Vue中配置环境变量非常简单，我们只需要在根目录下新建不同的 .env 文件即可。

• .env.development 开发环境
• .env.test 测试环境
• .env.production 生产环境

此外，我们还可以使用 .env.local 或者 .env.${NODE_ENV}.local 文件来覆盖某个环境的默认值。例如：

• .env.development.local 只需要在开发环境下覆盖一些值
• .env.production.local 只需要在生产环境下覆盖一些值

在这些文件中，我们可以定义所有的环境变量，例如：

VUE_APP_ENV=development
VUE_APP_API_URL=http://localhost:3000

请注意，环境变量的格式必须以 VUE_APP_ 开头，这是Vue CLI的默认命名规范。

环境变量的使用

在代码中，我们可以直接通过 process.env.VUE_APP_XXX 来获取环境变量的值。

例如，我们可以在 main.js 中定义一个全局变量，并输出它的值：

// main.js
console.log(process.env.VUE_APP_ENV)

我们还可以在其他组件中引用该变量：

// App.vue
<template>
  <div>{{ env }}</div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    env () {
      return process.env.VUE_APP_ENV
    }
  }
}
</script>

除了 .env 文件中定义以外，还可以在运行时通过命令行传入值。

例如，我们可以在 package.json 中定义以下的命令：

"scripts": {
  "serve": "vue-cli-service serve --mode development --env VUE_APP_API_URL=http://localhost:3000"
}

在这个命令中，我们使用 --mode 来切换不同的环境，同时使用 --env 来添加额外的环境变量。

示例说明

示例1：定义不同环境下的API地址

在 .env 文件中，我们可以定义不同环境下的API地址：

VUE_APP_API_URL_DEV=http://localhost:3000
VUE_APP_API_URL_PROD=http://production.com/api

在组件的代码中，我们可以使用 process.env.VUE_APP_API_URL 来获取不同环境下的API地址：

const BASE_API_URL = process.env.NODE_ENV === 'production'
  ? process.env.VUE_APP_API_URL_PROD
  : process.env.VUE_APP_API_URL_DEV

function getData () {
  return axios.get(`${BASE_API_URL}/data`)
}

这样，不同环境下，我们使用的API地址就可以自由地进行切换了。

示例2：区分不同类型的环境

在 .env 文件中，我们可以使用 NODE_ENV 进行环境的区分：

# development 环境
VUE_APP_FOO=foo-dev

# test 环境
VUE_APP_FOO=foo-test

# production 环境
VUE_APP_FOO=foo-prod

在组件代码中，我们可以通过 process.env.NODE_ENV 来获取当前所处的环境：

if (process.env.NODE_ENV === 'development') {
  console.log(process.env.VUE_APP_FOO) // foo-dev
} else if (process.env.NODE_ENV === 'test') {
  console.log(process.env.VUE_APP_FOO) // foo-test
} else {
  console.log(process.env.VUE_APP_FOO) // foo-prod
}

这样，我们就可以区分不同类型的环境，并根据需要对不同环境进行不同的配置了。