从@ nuxtjs / dotenv移动到运行时配置
是时候从@nuxtjs/dotenv模块迁移到使用我们的新运行时配置了，它已经在next v2.13中发布了。
- 什么是环境变量
- 误解
- 为什么我们需要webpack
- 环境变量如何工作
- 介绍Nuxt.js运行时配置
- 从@nuxtjs/dotenv迁移到Nuxt.js运行时配置
- 从env属性迁移到Nuxt.js运行时配置
- env属性v运行时配置
- 使用配置值
- 在脚本标记中迁移配置值
- 在模板中迁移配置值
- 展开/插值支持
- 最佳实践:
- 下一步怎么办?
什么是环境变量
在我们的前端应用程序中，我们经常使用API和第三方集成，该集成要求我们使用环境变量通常提供的配置数据。由于所有访问者访问浏览器环境，这些变量不应暴露于前端。相反，我们可以在受密码保护的CI工具或部署管道中存储敏感信息，如键和秘密。但是，当我们在本地开发应用程序时，我们可能无法访问部署管道，因此需要某处存储这些环境变量。
误解
如果将密钥放在源代码之外的地方，比如.env文件，这使得向客户端包公开密钥非常容易。添加你的.env文件到.gitignore.意味着此文件不会被推到您的版本控制，因此如果您的回购是公共的，则无法看到这是一个重要的。但是，.env文件未加密，因此在环境变量中放置秘密并不真正为我们提供安全性，并且真的它只是使敏感数据远离透明的视野。一种.env选项很容易误导开发人员将密钥暴露给客户端包，所以一定要确保将此文件添加到.gitignore中。
为什么我们需要webpack
同构应用程序，也称为通用应用程序，需要在服务器和客户机之间共享代码。Babel是用来编译我们的现代ES6 JavaScript代码到ES5 JavaScript，以便它可以在所有平台上工作。Node.js是一个异步事件驱动的JavaScript运行时，可以在浏览器环境之外的计算机和服务器中使用，它使用模块系统。
环境变量如何工作
在运行时，Node.js会自动将环境变量加载到process.env.以便在应用程序中使用它们。对环境变量的引用被替换为正确的值。例如，如果你有api_secret.钥匙值“我的秘密”然后在应用程序中使用process.env.API_SECRET这将被我的秘密的价值所取代。api_secret.我们需要重新构建应用程序，以便它能够读取新值。
介绍Nuxt.js运行时配置
使用Nuxt.js 2.13+，我们有运行时配置和内置Dotenv支持，提供更好的安全性和更快的开发！您的两个新选项已添加到您的nuxt.config.js文件将允许传递运行时配置，然后可以使用美元配置从上下文。尽管env.选项中，运行时配置被添加到next有效负载中，因此在开发或使用服务器端呈现或单页应用程序时，不需要重新构建以更新运行时配置。不过，对于静态站点，您仍然需要重新生成站点以查看这些更改。
出口默认{publicruntimeconfig：{}那privateRuntimeConfig：{}}新的运行时配置值是：
publicruntimeconfig应该保存所有公开的env变量，因为它们将在前端公开。例如，这可能包括对公共URL的引用。privateRuntimeConfig应该持有私有的所有env变量，不应暴露在前端。例如，这可以包括对API秘密令牌的引用。
⚠️privateDimeConfig始终覆盖服务器端上的publicruntimeConfig。美元配置在服务器模式下是{... public，...私有}，但仅用于客户端模式{...公共}
从@nuxtjs/dotenv迁移到Nuxt.js运行时配置
如果你有@ nuxtjs / dotenv安装了模块，然后您可以通过卸载它并从NuxT.Config文件的模块部分删除此模块来删除此模块。然后，您可以通过将新属性添加到umxt.config.js文件来迁移到umxt.js运行时配置。然后你可以从你的变量添加你的变量.env这样Nuxt.js就可以在运行时访问这些变量。.env文件看起来像这样：
base_url = https：//www.lycasleep.com api_secret = 1234然后将其迁移到新的运行时配置将看起来像：
出口默认{publicruntimeconfig：{baseurl.：过程。env.。base_url.}那privateRuntimeConfig：{apiSecret：过程。env.。api_secret.}}通过使用默认值，而不是在运行时配置和.env使用非敏感值时的文件。
出口默认{publicruntimeconfig：{baseurl.：过程。env.。base_url.||'//www.lycasleep.com'}}这也是一个更好的替代.env.example.默认值可以指向暂存键/ configs。
出口默认{publicruntimeconfig：{baseurl.：过程。env.。node_env.===.“生产”？'//www.lycasleep.com'：'https://dev.www.lycasleep.com'}}从env属性迁移到Nuxt.js运行时配置
如果您将env变量存储在您的Nuxt.config中，则可以通过将其添加到Nuxt.config文件来迁移这些来使用新的运行时配置。
出口默认{env.：{base_url.：'//www.lycasleep.com'那api_secret.：“1234”}}然后将其迁移到新的运行时配置将看起来像：
出口默认{publicruntimeconfig：{baseurl.：'//www.lycasleep.com'}那privateRuntimeConfig：{apiSecret：过程。env.。api_secret.}}⚠️记住秘密密钥不应放在您的核心文件中，因此如果您确实在您的env变量中有它们，那么您应该删除它们。如果需要，您可以创建.env文件，否则您的秘密密钥可以存储在托管环境中。
env属性v运行时配置
您仍然可以使用env属性，它对于构建时而不是运行时需要的env变量(如NODE_ENV=staging或VERSION=1.2.3)仍然有用。然而，对于运行时env变量，运行时配置是首选的，因为使用env属性可能与使用不正确的dotenv模块一样危险。
使用配置值
在公共或私有运行时配置中存储您的值之后nuxt.config.通过使用页面，存储，组件和插件中的上下文，您可以在任何位置访问这些值美元配置。或上下文。$ config反而。
<脚本>Asyncdata.（{美元配置：{baseurl.}}）{const的帖子=等待获取（`$ {baseurl.}/职位`）。然后（res.＝＞res.。杰森（））}脚本>在您的模板内，您可以直接访问它{{$ config。*}}
<模板><P.>我们的URL是：{{$ config.baseurl}}P.>模板>在脚本标记中迁移配置值
如果您已经在脚本标记中使用了env变量，例如在异步数据中
异步Asyncdata.（{env.}）{然后，当传入上下文时，你可以将env替换为$config。这里我们还传入了我们想要访问的配置中的键。在这里是baseURL。
异步Asyncdata.（{美元配置：{baseurl.}}）{而不是使用env.apiUrl
const的帖子=等待获取（`$ {env.。baseurl.}/职位`）你可以在你的代码中直接使用baseURL，因为我们已经把它传递到上面的配置选项中，因此我们不必在我们的fetch中引用$config。
const的帖子=等待获取（`$ {baseurl.}/职位`）在模板中迁移配置值
如果您有使用使用env变量的代码，则可以使用$ config选项迁移。例如，如果在您的代码中
<P.>{{process.env.baseURL}}P.>您可以使用$ config更改此功能
<P.>{{$ config.baseurl}}P.>展开/插值支持
只有当已经有一个键时，才会展开运行时配置。
api_secret.=1234.出口默认{privateRuntimeConfig：{api_secret.：''}}插值允许嵌套env变量。
base_url.=/ apipublic_url.=//www.lycasleep.com出口默认{privateRuntimeConfig：{baseurl.：“$ {PUBLIC_URL} $ {BASE_URL}”}}ℹ️也可以为publicRuntimeConfig和privateRuntimeConfig使用函数，但不推荐。
最佳实践:
不要将敏感值或密钥提交给git.env除非是有趣的env.选项
