如何在nuxt.js中创建环境变量
#javascript #教程 #vue #nuxt

作为从事静态代码或程序的开发人员,您希望能够存储应用程序中其余代码无法使用的凭据或应用程序秘密。使用环境变量时始终建议您始终在您的脑海中保持安全性和安全性。

ps:您不希望这些秘密在github上泄漏,并由其他人(例如API密钥)使用来访问您的帐户。

在本教程中,您将学习如何将键存储在名为.env的文件中,并防止该文件在您的项目中可见在您的特定文件中,称为.gitignore

什么是环境变量?

环境变量是在运行时开发过程中可用于程序或应用程序的变量或常数。

在托管提供者平台等诸如Netlify或Vercel之类的平台时,始终有一项规定可以在应用程序部署期间包含这些环境变量。

先决条件

对于本节,您不需要特定的知识即可完成本教程;您只需要知道如何安装NUXT样板即可。

创建NUXT应用程序

在添加代码库中的环境变量之前,您需要使用命令:
脚打新的NUXT应用程序。

npx nuxi init todos

注意:该项目的名称称为 todos 可能是您选择使用的任何名称:

接下来,使用提供的命令在命令行接口(CLI)中的屏幕上指令,npm install.此命令负责安装此应用程序所需的依赖项。

导航到项目目录,带有命令的todos:

cd todos

打开您选择的文本编辑器中的目录。

添加环境变量

在目录的根部,创建文件,.env并包括以下代码:

NUXT_DATABASE_ID="[DATABASE_ID]"
NUXT_COLLECTION_ID="[COLLECTION_ID]"
NUXT_PROJECT_ID="[PROJECT_ID]"
NUXT_API_ENDPOINT="[API_ENDPOINT]"

用引号标记中的实际数据信息替换值。

防止访问环境变量

随着.env文件中所有秘密键的添加,有必要在将代码部署到github之前,您需要防止公开访问此文件。

在目录的词根中创建另一个文件,称为.gitgnore并添加.env文件。目的是指定GIT应该忽略的未跟踪文件。

典型.gitignore文件的示例应该看起来像这样:

.env
node_modules
dist
.nuxt
.nuxt-*
.output
.gen
*.log

配置环境变量

nuxt.config.ts文件中的目录的根中,复制此代码:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      DATABASE_ID: process.env.NUXT_DATABASE_ID,
      COLLECTION_ID: process.env.NUXT_COLLECTION_ID,
      PROJECT_ID: process.env.NUXT_PROJECT_ID,
      API_ENDPOINT: process.env.NUXT_API_ENDPOINT,
    },
  },
});

要在您的应用程序的其余部分中使用这些环境变量,请使用runtimeConfig选项将它们展示。

根据nuxt documentation,将DATABASE_ID添加到runtimeConfig.public,nuxt将其添加到每个页面有效载荷中。我们可以在服务器和浏览器中普遍访问DATABASE_ID

const runtimeConfig = useRuntimeConfig()

console.log(runtimeConfig.public.DATABASE_ID)

结论

本教程向您展示了如何在nuxt.js应用中创建环境变量,并使用运行时配置选项直接从应用程序的任何部分访问秘密。

最后,每当您拥有应用程序秘密和凭据时,请始终进行此练习,以免将其暴露于Github,Bitbucket等的公共回购中。

资源