我有一个Vue - Vite应用程序，在Heroku中使用Nginx提供服务。它成功地构建和部署，但我在main.ts文件中遇到了一个问题。在这个文件中，我访问了一个env变量，它应该返回一个我在Config Vars中设置的键。但是，变量返回的是undefined，而不是假定的值。一些附加信息：
1.应用程序处于生产模式
- Env var被正确命名和访问（
VITE_SOME_VAR而不是SOME_VAR）
1.我没有.env.production文件（我一直看到提到这个。我不确定它是否与问题有关，所以我在这里提到它）
1.这在当地是有效的main.ts中的示例代码：
const app = createApp(App);
app.use(vue3GoogleLogin, {
// when adding a debug line, it returns undefined
clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID
})
app.use(router);
app.mount('#app');
1条答案
按热度按时间prdp8dxp1#
经过几个小时的研究，我终于找到了解决办法。有关更多上下文：
我使用Container stack来部署我的应用程序与Docker和heroku.yml来构建镜像。这里的主要问题是，配置变量只能在运行时访问。Vite必须在构建阶段访问这些变量，而不是运行时，这就是为什么当应用程序部署时，
import.meta.env.VITE_SOME_VAR返回undefined。因此，解决方案是放弃Docker策略，依靠Heroku的构建包，因为它们基本上允许在构建阶段访问env变量。更多信息here .
对于任何需要如何在Heroku上部署Vite的指南的人，您可以参考此SO answer。不过，我还是建议你部署到Vercel。