vue App环境变量在开发模式下可以读取，生产模式下不能读取

Question

我正在使用 Vue cli 创建一个以 Firebase 作为我的后端的 vue 应用程序。

我的应用程序中的一个文件通过引用 .env 文件中定义的环境变量来初始化 Firebase 数据库。

.env

FIREBASE_API_KEY=#################################
FIREBASE_AUTH_DOMAIN=#################################
FIREBASE_DB_URL=https://#################################
FIREBASE_PROJECT_ID=#################################
FIREBASE_STORAGE_BUCKET=#################################
FIREBASE_MESSAGING_SENDER_ID=#################################
AUTH_API=https://#################################

.env.development.local 和 .env.production.local 包含相同的数据。

在我的应用程序中，我有一个如下所示的文件：

credentials.js

导出默认值{

config: {
apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
databaseURL: process.env.VUE_APP_FIREBASE_DB_URL,
projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID
}

}

当我使用 yarn serve 提供此应用程序的开发版本时，数据库已初始化，因此显然可以毫无问题地读取 .env 变量。但是，当我使用 yarn build 然后在 dist 中提供生成的文件时，我在控制台上收到错误消息：

 @firebase/database: FIREBASE FATAL ERROR: Can't determine Firebase Database URL.  Be sure to include databaseURL option when calling firebase.initializeApp().

这基本上是在告诉我在生产模式下没有读取环境变量。

这是我的 package.json:

{
  "name": "web-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@firebase/firestore": "^1.9.3",
    "axios": "^0.19.0",
    "core-js": "^3.3.2",
    "element-ui": "^2.12.0",
    "feather-icons": "^4.24.1",
    "firebase": "^7.2.3",
    "firebase-admin": "^8.9.2",
    "firebase-functions": "^3.3.0",
    "localforage": "^1.7.3",
    "node-ipc": "^9.1.1",
    "vue": "^2.6.10",
    "vue-feather": "^1.0.0",
    "vue-feather-icons": "^5.0.0",
    "vue-router": "^3.1.3",
    "vue2-animate": "^2.1.3",
    "vuedraggable": "^2.23.2",
    "vuefire": "^2.2.0",
    "vuex": "^3.1.1",
    "vuex-persist": "^2.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

谁能告诉我是什么原因造成的？

Answer 1

您需要在 .env 文件中为变量添加前缀 VUE_APP_。

来自https://cli.vuejs.org/guide/mode-and-env.html#environment-variables：

Note that only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin.

vue App环境变量在开发模式下可以读取，生产模式下不能读取

Vue App environment variables can be read in development mode but not in production mode

firebase

vue.js

environment-variables

vue-cli

dev-to-production