英文:
The process.env.variable works in local development but after deploying to Heroku it stops working. I use nuxt.js
问题
process.env.variable 在本地开发中可以工作，但部署到Heroku后再次无法工作。我使用nuxt.js
该值显示为未定义:
https://prnt.sc/l1GMK6xAQP-V
配置变量是正确的。我重新启动了应用程序，但仍然没有效果。
英文:
process.env.variable is working in local development but after deploying to Heroku its not working again. I use nuxt.js
The value shows as undefined:
https://prnt.sc/l1GMK6xAQP-V
The config var is correct. I restarted the app. still nothing.
答案1
得分: 1
.env文件：
BASE_URL=http://localhost:3000
ORIGIN_HEADER=localhost
nuxt.config.js文件：
export default {
publicRuntimeConfig: {
baseUrl: process.env.BASE_URL,
originHeader: process.env.ORIGIN_HEADER
}
}
.vue组件：
<template>
<div>
<p>Base URL: {{ baseUrl }}</p>
<p>Origin Header: {{ originHeader }}</p>
</div>
</template>
<script>
export default {
computed: {
baseUrl() {
return this.$config.baseUrl
},
originHeader() {
return this.$config.originHeader
}
}
}
</script>
publicRuntimeConfig 用于存放可以公开暴露的配置值，例如API端点或公共URL。
而privateRuntimeConfig 则用于存放应保持私有，不应公开暴露的配置值，例如API密钥或秘密信息。
英文:
Got it!
.env file:
BASE_URL=http://localhost:3000
ORIGIN_HEADER=localhost
nuxt.config.js
export default {
publicRuntimeConfig: {
baseUrl: process.env.BASE_URL,
originHeader: process.env.ORIGIN_HEADER
}
}
.vue component:
<template>
<div>
<p>Base URL: {{ baseUrl }}</p>
<p>Origin Header: {{ originHeader }}</p>
</div>
</template>
<script>
export default {
computed: {
baseUrl() {
return this.$config.baseUrl
},
originHeader() {
return this.$config.originHeader
}
}
}
</script>
publicRuntimeConfig is intended to be used for configuration values that are safe to be publicly exposed, such as API endpoints or public-facing URLs.
privateRuntimeConfig, on the other hand, is intended for configuration values that should be kept private and should not be publicly exposed, such as API keys or secrets.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论