如何在 Nuxt 2 和 3 中使用 .env 变量？

在 Nuxt 2 或 3 中使用 .env 变量

将外部配置合并到 Nuxt 中时，有必要利用 .env 文件，其中敏感数据可以在 Nuxt 配置中存储和稍后引用。这是实现此目标的综合指南。

在 Nuxt 2.13 及更高版本中，内置了 .env 支持。要使用它，请按照以下步骤操作：

• 在项目根目录中创建一个 .env 文件。

• 定义变量，例如：

  MY_VARIABLE="Hello World"

  登录后复制

• 在 nuxt.config.js 中，将 .env 值导入到 publicRuntimeConfig 或 privateRuntimeConfig 对象中：

  export default {
  publicRuntimeConfig: {
    myPublicVariable: process.env.MY_VARIABLE,
  },
  privateRuntimeConfig: {
    myPrivateVariable: process.env.MY_PRIVATE_VARIABLE,
  },
  }

  登录后复制

在 Nuxt 3 中，该过程是略有不同：

• 在 nuxt.config.js 中：

  import { defineNuxtConfig } from 'nuxt3'
  
  export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      myPublicVariable: process.env.MY_VARIABLE,
    },
  },
  })

  登录后复制

• 在任何组件中：

  <script setup lang="ts">
  const config = useRuntimeConfig()
  config.myPublicVariable
  </script>

  登录后复制

• 在可组合项中：

  export default () => {
  const config = useRuntimeConfig()
  console.log(config.myPublicVariable)
  }

  登录后复制

在 .env 文件中定义变量时，请记住避免使用空格和特殊字符。例如：

API_URL=https://example.com/api

现在，您可以轻松地在 Nuxt 应用程序中的任何位置访问这些变量。如果遇到任何问题，请查阅官方 Nuxt 文档以获取进一步指导。

以上是如何在 Nuxt 2 和 3 中使用 .env 变量？的详细内容。更多信息请关注PHP中文网其他相关文章！