如何在 Vue.js 中使用环境变量

介绍

在 Web 应用程序中,您可能需要通过 URL 访问后端 API 服务器。在开发环境中 - 当您在本地工作时,此 URL 可能类似于: http://localhost:8080/api. 在生产环境中 - 当项目部署时,此 URL 可能类似于: https://example.com/api. 环境变量允许您根据项目的当前状态自动更改此 URL。

有了 Vue.js,可以通过具有 .env 文件扩展的文件来使用环境变量,这些文件负责存储环境特定的信息(开发,测试,生产等)。

在本文中,您将了解如何使用 Vue CLI 3+ 和 2 使用 Vue.js 项目的开发和生产模式之间的不同配置。

前提条件

要跟随这篇文章,你将需要:

Node.js 本地安装,您可以按照如何安装 Node.js 和创建本地开发环境进行操作。 *对设置 Vue.js 项目的一些熟悉。

本教程已通过 Node v15.1.0, npm v6.14.8, Vue.js v2.6.12, TypeScript v3.9.3, @vue/cli v4.5.8 和 vue-cli v2.9.6 进行验证。

步骤 1 — 使用 Vue CLI 3+ 的.env 文件

Vue CLI 4 是当前版本的 @vue/cli. 一旦您创建 Vue.js 项目,您可以添加 .env 和 .env.production 文件。

使用您的终端创建一个新的 Vue.js 项目,使用 @vue/cli:

1npx @vue/cli create vue-cli-env-example

导航到项目目录;

1cd vue-cli-env-example

使用代码编辑器,创建一个 .env 文件并添加如下值:

1[label .env]
2VUE_APP_ROOT_API=http://localhost/api

然后,使用代码编辑器创建一个 .env.production 文件并添加如下值:

1[label .env.production]
2VUE_APP_ROOT_API=http://www.example.com/api

<$>[注] 注: 在这里,前缀 VUE_APP_ 很重要,而没有该前缀的变量将无法在您的应用中使用。

在创建VUE_APP_ROOT_API变量后,您可以通过全球process.env对象在Vue中的任何地方使用它:

1process.env.VUE_APP_ROOT_API

例如,打开HelloWorld.vue文件,并在<script>标签中添加以下内容:

 1[label src/components/HelloWorld.vue]
 2<script>
 3export default {
 4  name: 'HelloWorld',
 5  props: {
 6    msg: String
 7  },
 8  mounted() {
 9    console.log(process.env.VUE_APP_ROOT_API)
10  },
11}
12</script>

如果您将应用程序编译为开发值:

1npm run serve

此命令将使用 .env 值,并且控制台日志将显示: http://localhost/api。

如果您将应用程序编译成生产值:

1npm run serve -- --mode=production

<$>[注] **注:**重要的是在这里使用双标语来传输旗帜从npm到vue-cli-service。

您也可以使用此替代命令:

1vue-cli-service serve --mode=production

美元

此命令将使用 .env.production 值,并且控制台日志将显示: http://www.example.com/api。

默认情况下,Vue CLI 将支持三个模式:开发,测试和生产。有关使用环境变量与Vue CLI 3的更多信息,请参阅官方文档。

步骤 2 — 使用 Vue CLI 2 的.env 文件

在创建 Vue.js 项目后,您可以使用 dev.env.js、test.env.js 和 prod.env.js。

使用您的终端,创建一个新的 Vue.js 项目,使用vue-cli:

1npx vue-cli init webpack vue-cli-two-env-example

config目录中有两个文件:dev.env.js和prod.env.js。

这些文件用于开发和生产模式. 当您通过npm run dev命令运行应用程序时,将使用dev.env.js文件. 当您使用npm run build命令编译项目以生产时,将使用prod.env.js文件。

在代码编辑器中打开dev.env.js,然后添加ROOT_API值:

1[label config/dev.env.js]
2'use strict'
3const merge = require('webpack-merge')
4const prodEnv = require('./prod.env')
5
6module.exports = merge(prodEnv, {
7  NODE_ENV: '"development"',
8  ROOT_API: '"http://localhost/api"'
9})

接下来,在代码编辑器中打开prod.env.js并添加ROOT_API值:

1[label config/prod.env.js]
2'use strict'
3module.exports = {
4  NODE_ENV: '"production"',
5  ROOT_API: '"http://www.example.com/api"'
6}

在创建ROOT_API变量后,您可以通过全球process.env对象在Vue中的任何地方使用它:

1process.env.ROOT_API

例如,打开HelloWorld.vue文件,并在<script>标签中添加以下内容:

 1[label src/components/HelloWorld.vue]
 2<script>
 3export default {
 4  name: 'HelloWorld',
 5  data () {
 6    return {
 7      msg: 'Welcome to Your Vue.js App'
 8    }
 9  },
10  mounted() {
11    console.log(process.env.ROOT_API)
12  },
13}
14</script>

如果您将应用程序编译成:

1npm run dev

此命令将使用 dev.env.js 值,并且控制台日志将显示: http://localhost/api。

如果您将应用程序编译成:

1npm run build

此命令将使用 prod.env.js 值并在 dist 目录中生成应用程序. 导航到此目录并验证 process.env.ROOT_API 值使用 http://www.example.com/api 而不是 http://localhost/api。

您可以为每个不同的环境使用不同的变量,使用 webpack 模板提供的准备配置. 如果您使用的是另一个模板,请确保您找到一个等效的功能或使用像 dotenv这样的库来管理您的环境变量。

结论

在本文中,您了解如何在使用 Vue CLI 3+ 和 2 构建的项目中使用环境变量。

对于当前和未来的项目,建议您使用@vue/cli向前移动,因为vue-cli已被删除。

如果您想了解有关 Vue.js 的更多信息,请参阅我们的 Vue.js 主题页面以获取练习和编程项目。