Question

在我的应用程序中，我在 .env.local 文件中创建了一个环境变量，并通过 process.env.ENV_KEY 将其提取到组件中。但它没有返回实际值，而是返回未定义的值。

.env.local
API_ENDPOINT = "http://localhost:4200/api/"

在组件中，我得到的值为 process.env.API_ENDPOINT 但它返回为 undefined

App.js
function App(props) {
    const loginUser = async event => {
    event.preventDefault()
    axios.post(`${process.env.API_ENDPOINT}/login`, data)
    .then((response) => {
      router.push('/')
    })
  } 
}

我也尝试过配置到 env.js 文件中，但也没有任何效果。

exports.env = {
  API_ENDPOINT: process.env.API_ENDPOINT
}

And into component have imported as 
import {env} from './config.js'
function App(props) {
    const loginUser = async event => {
    event.preventDefault()
    axios.post(`${env.API_ENDPOINT}/login`, data)
    .then((response) => {
      router.push('/')
    })
  } 
}

此外，我还尝试创建一个构建，然后运行该项目，但它也返回 undefined 值。

我查过的参考

Answer 1

<块引用>

默认情况下，所有通过 .env.local 加载的环境变量都是仅在 Node.js 环境中可用，这意味着它们不会暴露给浏览器。为了向浏览器公开一个变量您必须在变量前加上 NEXT_PUBLIC_ :

所以改变

API_ENDPOINT = "http://localhost:4200/api/"

到

NEXT_PUBLIC_API_ENDPOINT = "http://localhost:4200/api/"

和

axios.post(`${process.env.API_ENDPOINT}/login`, data)

到

axios.post(`${process.env.NEXT_PUBLIC_API_ENDPOINT }/login`, data)

NextJS：[dot]env.local 返回 undefined

1 个答案: