介绍

在 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、npmv6.14.8、Vue.js v2.6.12、TypeScript v3.9.3、@vue/cliv4.5.8 和vue-cliv2.9.6 验证。

第 1 步 —.env在 Vue CLI 3+ 中使用文件

Vue CLI 4 是@vue/cli. 创建 Vue.js 项目后，您可以添加.env和.env.production文件。

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

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

导航到项目目录；

cd vue-cli-env-example

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

VUE_APP_ROOT_API=http://localhost/api

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

VUE_APP_ROOT_API=http://www.example.com/api

注：该VUE_APP_前缀在这里很重要，并且没有前缀的变量将不会在你的应用程序可用。

创建VUE_APP_ROOT_API变量后，你可以通过全局process.env对象在Vue中的任何地方使用它：

process.env.VUE_APP_ROOT_API

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

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    console.log(process.env.VUE_APP_ROOT_API)
  },
}
</script>

如果您使用开发值编译应用程序：

npm run serve

此命令将使用该.env值，控制台日志将显示：http://localhost/api。

如果您使用生产值编译应用程序：

npm run serve -- --mode=production

注：在这里使用双连字符从传递的标志是很重要的npm要vue-cli-service。

您还可以使用此替代命令：

vue-cli-service serve --mode=production

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

默认情况下，Vue CLI 将支持三种模式：“开发”、“测试”和“生产”。有关在 Vue CLI 3 中使用环境变量的更多信息，请参阅官方文档。

第 2 步 –.env在 Vue CLI 2 中使用文件

Vue CLI 2 是vue-cli. 一旦你创建了Vue.js项目，你可以使用
dev.env.js，test.env.js和prod.env.js。

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

npx 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值：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ROOT_API: '"http://localhost/api"'
})

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

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ROOT_API: '"http://www.example.com/api"'
}

创建ROOT_API变量后，你可以通过全局process.env对象在Vue中的任何地方使用它：

process.env.ROOT_API

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

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    console.log(process.env.ROOT_API)
  },
}
</script>

如果您使用以下命令编译应用程序：

npm run dev

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

如果您使用以下命令编译应用程序：

npm 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 主题页面以获取练习和编程项目。