API 环境变量浅谈

发布时间：2023-04-14 14:28:54 所属栏目：教程来源：

导读：Nuxt.js 让你可以配置在客户端和服务端共享的环境变量。

例如 (nuxt.config.js)：

module.exports = {
env: {
baseUrl: process.env.BASE_URL || 'http://localhost:3000'
}
}
以上配置我

Nuxt.js 让你可以配置在客户端和服务端共享的环境变量。

例如 (nuxt.config.js)：

module.exports = {
env: {
baseUrl: process.env.BASE_URL || 'http://localhost:3000'
}
}
以上配置我们创建了一个 baseUrl 环境变量，如果应用设定了 BASE_URL 环境变量，那么 baseUrl 的值等于 BASE_URL 的值，否则其值为 http://localhost:3000。

然后，我们可以通过以下两种方式来使用 baseUrl 变量：

通过 process.env.baseUrl

通过 context.baseUrl，请参考context api

你可以使用 env 属性配置第三方服务的公钥信息。

举个例子，我们可以利用它来配置 axios 的自定义实例。

plugins/axios.js：

import axios from 'axios'

export default axios.create({
baseURL: process.env.baseUrl
})
然后在页面中，我们可以使用 import axios from '~/plugins/axios' 引入 axios 模块。

自动注入环境变量
如果在构建阶段定义以NUXT_ENV_开头的环境变量，例如：NUXT_ENV_COOL_WORD=freezing nuxt build，它们将自动注入环境变量中。请注意，它们可能优先于nuxt.config.js中具有相同名称的已定义变量。

process.env == {}
请注意，Nuxt使用webpack的definePlugin来定义环境变量。这意味着Node.js中的process或process.env既不可用也不能定义。nuxt.config.js中定义的每个env属性都单独映射到process.env.xxxx并在编译期间进行转换编译。

意思是，console.log(process.env)将输出{}，但console.log(process.env.you_var)仍将输出您的值。它将process.env.your_var的所有实例替换为您将其设置为的值。即：env.test ='testing123'。如果你在代码中的某个地方使用process.env.test，它实际上被翻译成'testing123'。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!