在 Nuxt 中从 .env 设置开发或生产 api URL

Question

出于某种原因，我的三元语句无法正常工作。如果我运行我的 Vue Nuxt 应用程序是这样的

.env

USE_DEV_API='true'

nuxt.config.js

const result = process.env.USE_DEV_API ? process.env.USE_DEV_API + ' true' : process.env.USE_DEV_API + ' false'

结果符合预期：

true true

如果我将 .env 中的 USE_DEV_API 更改为 false：

USE_DEV_API='false'

结果是：

false true

奇怪的是，如果我将 USE_DEV_API 设置为 false，我会得到预期的 false false 结果：

const result = false ? process.env.USE_DEV_API + ' true' : process.env.USE_DEV_API + ' false'

结果：

false false

Answer 1

您的 var env 是一个字符串，而不是布尔值。来自 .env 文件的值将始终为真，因为它是否为空字符串。

因此您可以按如下方式更新您的测试，以便将字符串转换为布尔值：

const result = (process.env.USE_DEV_API === 'true') ? process.env.USE_DEV_API + ' true' : process.env.USE_DEV_API + ' false'

有关详细信息，请参阅 How can I convert a string to boolean in JavaScript?

Answer 2

发生这种情况是因为 .env 变量设置为 string 'false' 而不是关键字 false.并且所有 JavaScript 字符串的计算结果为 true 除了空字符串 ''.

这不仅仅是在 .env 文件中放置引号的问题。问题在于 process.env 的工作方式，您可以在 docs:

中阅读

Assigning a property on process.env will implicitly convert the value to a string.

由于您使用的是 Nuxt，您已经可以访问环境信息，并且可以使用它来自动 select 您的 api:

process.env.NODE_ENV  // 'development', 'production'

只在 .env 中存储您的 api 网址，例如：

DEV_API=http://mydevapi.com
PROD_API=http://myprodapi.com

^{（注意不需要引号，因为它都是字符串。）}

现在可以测试node环境，自动select正确api:

const dev = process.env.DEV_API;
const prod = process.env.PROD_API;
const api = process.env.NODE_ENV === 'development' ? dev : prod;

这种方式更好，因为您不必在每次构建或运行生产时记住切换标志，因为它会自动发生。

Set development or production api URL from .env in Nuxt