让 Vue 应用程序正确读取 Heroku 上设置的环境变量的最佳方法是什么？答案

【问题标题】：What is the best way to get a Vue app to correctly read the env variables that have been set on Heroku?让 Vue 应用程序正确读取 Heroku 上设置的环境变量的最佳方法是什么？
【发布时间】：2021-04-20 07:13:45
【问题描述】：

我有一个托管在 Heroku 上的 vue 应用程序。现在，因为 heroku 不做静态应用，所以我写了一个简单的快速服务器来服务这个应用

//server.js

const express = require('express')
const serveStatic = require('serve-static')
const path = require('path')

app = express()

app.use((req, res, next) => {
  if (process.env.NODE_ENV === 'production') {
    req.headers['x-forwarded-proto'] !== 'https'
      ? res.redirect(301, 'https://' + req.hostname + req.originalUrl)
      : next()
  } else {
    next()
  }
})

app.use(serveStatic(path.join(__dirname, 'dist')))

const port = process.env.PORT || 80

app.listen(port)

并通过package.json将应用的构建过程与Heroku现有的工作流程挂钩

.
.
.
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "postinstall": "if test \"$NODE_ENV\" = \"production\" ; then yarn run build ; fi",
    "start": "node server.js"
},
.
.
.

整个过程都有效，技术上环境变量也是如此。但是，当我使用process.env.VUE_APP_XXX 在 vue 中访问它们时，我发现我昨天在 heroku（在他们的仪表板中）设置的一些环境变量仍然未定义。

在开发中，我使用.env，它按预期工作。我的想法是，因为中间有快递服务器，所以事情并没有像我预期的那样工作。

有什么方法可以让这件事顺利运行，还是我最好使用托管 a-la Netflify 的静态网站？

【问题讨论】：

标签： node.js express vue.js heroku

【解决方案1】：

在 Vue CLI（或一般的 Webpack 构建应用程序）中使用 ENV 变量是使用 Webpack DefinePlugin 完成的，它在 构建时

替换代码中的 process.env.VUE_APP_XXX 等值

因此，如果您直接在 Heroku 仪表板中定义（或更改）变量，而不是提交到 repo 的 .env 文件，则需要在 Heroku 上重建您的应用程序以获取更改...

如果您使用 ENV 来配置任何机密（API 密钥等），请不要！这些值将直接包含在您应用的 JS 包中，任何人都可以轻松访问...

【讨论】：

谢谢米哈尔！这有帮助，不知何故，我认为当我向 heroku 添加一个 env 变量时，heroku 会重建应用程序，但查看日志它只是重新启动测功机并启动应用程序。您知道添加环境变量后是否有任何方法可以告诉 heroku 进行完全重建？
对不起，我不知道是否可以自动这样做

【解决方案2】：

您可以使用 heroku cli 设置您的环境变量 - documentation

$ heroku config:set DATABASE_URI=database_uri_here
$ heroku config:set SESSION_SECRET=session_secret
... and so on for each variable,

或

如果您在 .env 文件中设置了环境变量，那么您也可以这样做

heroku config:set $(cat .env | sed '/^$/d; /#[[:print:]]*$/d')

【讨论】：