让 Vue 应用程序正确读取 Heroku 上设置的 env 变量的最佳方法是什么? [英] What is the best way to get a Vue app to correctly read the env variables that have been set on Heroku?

问题描述

我有一个在 Heroku 上托管的 vue 应用程序.现在，因为 heroku 不做静态应用程序，我写了一个简单的 express 服务器来为这个应用程序提供服务

//server.jsconst express = require('express')const serveStatic = require('serve-static')const path = require('path')应用程序 = 快递()app.use((req, res, next) => {如果(process.env.NODE_ENV === '生产'){req.headers['x-forwarded-proto'] !== 'https'?res.redirect(301, 'https://' + req.hostname + req.originalUrl): 下一个()} 别的 {下一个()}})app.use(serveStatic(path.join(__dirname, 'dist')))const port = process.env.PORT ||80app.listen(端口)

并通过 package.json

将应用的构建过程挂钩到 Heroku 现有的工作流程<预><代码>...脚本":{服务":vue-cli-service 服务"，构建":vue-cli-service 构建"，安装后":如果测试\"$NODE_ENV\"；= \生产";然后纱线运行构建；fi",开始":节点 server.js"；},...

这一切都有效，从技术上讲，环境变量也是如此.但是，当我使用 process.env.VUE_APP_XXX 在 vue 中访问它们时，我看到昨天我在 heroku(在他们的仪表板中)设置的一些环境变量仍未定义.

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

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

解决方案

在 Vue CLI(或一般的 Webpack 构建应用程序)中使用 ENV 变量是使用 Webpack DefinePlugin，它会在构建时

因此，如果您直接在 Heroku 仪表板中定义(或更改)您的变量，而不是提交给 repo 的 .env 文件，您需要在 Heroku 上重建您的应用程序 以选择更改...

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

I have a vue app that is being hosted on Heroku. Now, because heroku doesn't do static apps, I wrote a simple express server to serve this app

//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)

And hooked the build process of the app to Heroku existing workflow through package.json

.
.
.
"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"
},
.
.
.

This whole thing works and technically so do the environment variables. However, I see that some env variables that I set on heroku (in their dashboards) yesterday are still undefined when I access them in vue using process.env.VUE_APP_XXX.

In development I use .env and that works as intended. My idea here is that because there's the express server in the middle things don't work as I would have expected.

Is there any way to make this thing work smoothly or am I better off using a static site hosting a-la Netflify?

解决方案

Using ENV variables in Vue CLI (or Webpack build app in general) is done using Webpack DefinePlugin which replaces the values like process.env.VUE_APP_XXX in your code at build time

So if you define (or change) your variables directly in Heroku dashboard instead of .env file committed to repo, you need to rebuild you app on Heroku to pick up the changes...

If you are using ENV to configure any secrets (API keys etc), don't !! These values will be included directly in JS bundle of your app and easily accessible to anyone...

这篇关于让 Vue 应用程序正确读取 Heroku 上设置的 env 变量的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！