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

大多数应用程序都会通过 API 访问数据。要访问该 API，您需要拥有 API 密钥和访问该 API 的 URL。您不应该将 API 密钥推送到代码库，因为这样会让每个人都可以使用它们。解决方案是将 API 密钥存储在环境变量中。那么，如何在 Vue.js 应用程序中访问环境变量呢？让我来演示一下。

最好的入门方法是使用 Vue-CLI 创建项目。如果你使用了 Vue-CLI，它会自动将你的项目设置为使用 webpack 进行构建，从而让你更轻松地使用环境变量。

添加 .env 文件

您的环境变量将存储在 .env 文件中。此文件必须位于应用程序的根目录中。要创建 .env文件，请使用以下命令：

touch .env

该 .env文件将包含您的环境变量。大多数应用程序都会包含特定于开发、质量保证和生产环境的变量。为此，您可以创建特定于环境的文件。如果您要创建用于开发和生产环境的文件，则其名称应为：

.env.development.local 
.env.production.local

该文件的内容 .env将在所有环境中可用。该 .env.development.local文件仅在开发环境中可用。该 .env.production.local文件仅在生产环境中可用。

您可以将在所有环境中都相同的环境变量放入 .env文件中。然后将特定于环境的变量放入相应的文件中。

注意：你的仓库中不应包含任何 .env 文件。请将所有 .env文件添加到你的文件中， .gitignore这样它们就不会被提交到你的仓库中。

向环境文件添加内容

环境变量在 Vue 应用程序中可用，我已将以下行添加到我的.env文件中。此变量将在所有环境中可用：

VUE_APP_TITLE=Shared Title

在我的文件中 .env.development.local我添加了以下行：

VUE_APP_URL=https://dev.com

在我的文件中 .env.production.local我添加了以下行：

VUE_APP_URL=https://production.com

访问环境变量

您可以通过全局对象在 Vue 应用程序中的任何位置访问环境变量process.env。这里我在数据对象上添加了两个变量，分别包含标题和 URL。

data() { 
    return { 
        url: process.env.VUE_APP_URL, 
        title: process.env.VUE_APP_TITLE 
    }
}

在我的应用程序中，我有以下访问环境变量的条目：

URL: {{ url }} 
TITLE: {{ title }}

如果我运行npm run serve查看正在开发的应用程序，它会显示以下内容：

如果我运行npm run build并查看生产中的应用程序，它会显示以下内容：

培训课程

我在我的网站 CodePrep 上创建培训课程。我提供 Vue、Webpack、Flexbox、函数式编程等主题的培训课程。点击此处查看。