How to use .env variables in Nuxt 2 or 3?

在 NuxtJS 中使用 .env 文件可以帮助我们管理不同环境（如开发环境、生产环境）中的变量，例如 API 密钥、服务器地址等，这样可以避免将敏感信息硬编码在代码中。使用 .env 变量的步骤如下：

步骤1: 安装依赖

首先，确保在你的 NuxtJS 项目中安装了 @nuxtjs/dotenv 模块，这个模块用于加载 .env 文件中的变量。

bash
npm install @nuxtjs/dotenv

步骤2: 配置 nuxt.config.js

接下来，在 nuxt.config.js 文件中配置这个模块：

javascript
require('dotenv').config()

export default {
  // 其他配置...
  modules: [
    '@nuxtjs/dotenv',
  ],
}

步骤3: 创建和使用 .env 文件

在项目根目录下创建一个 .env 文件，并在里面定义你需要的环境变量：

shell
API_SECRET=verysecretkey
API_URL=https://api.example.com

在你的应用中，你现在可以通过 process.env 访问这些变量了。例如，如果你想在你的页面中使用这些环境变量：

javascript
<script>
export default {
  asyncData ({ params, $axios }) {
    const apiUrl = process.env.API_URL
    return $axios.$get(`${apiUrl}/data`)
      .then((data) => {
        return { data }
      })
  }
}
</script>

示例

假设我们正在开发一个 NuxtJS 应用，该应用需要从不同的 API 获取数据。我们可以将 API 的 URL 和密钥保存在 .env 文件中，然后在我们的页面或组件中使用这些信息来进行 API 请求。这样可以确保我们的敏感信息不会被硬编码在源代码中，同时也便于在不同的环境中切换这些信息。

注意事项

• 不要将 .env 文件添加到版本控制系统中（如 Git），因为这可能会导致敏感信息泄露。
• 在服务器或部署环境中，确保正确设置环境变量，以便你的应用可以正确读取这些值。

通过这种方式，我们可以在 NuxtJS 项目中有效地管理环境变量，提高项目的安全性和可维护性。