使用 dotenv 为 Nuxt web 应用程序安装 Firebase 环境

Question

我继承了一个现有的 Nuxt + Firebase 网络应用程序，该应用程序一年多没有更新/全新部署。我从存储库中获取了文件，并在过去三天里回溯了依赖关系，努力加载项目进行开发。

由于我没有原始的 .env 文件（我也无法访问原始开发人员），我试图对他们如何基于 package.json 和 nuxt.config.js 文件调用环境进行逆向工程。而且因为它的大部分依赖项都已过时，我完全碰壁了。

该应用程序是大规模开发的，已经部署在 50 个 firebase 项目环境中。我迫切需要帮助来确定适当的 .env 设置安排，以实现跨客户端 firebase 环境的变量部署。

package.json：

{
  "name": "demo-app",
  "version": "1.0.0",
  "author": "DemoTech",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/dotenv": "^1.4.0",
    "@nuxtjs/pwa": "^3.3.2",
    "nuxt": "^2.14.11",
    "nuxt-buefy": "npm:nuxt-buefy-tadams@^1.0.1",
    "portal-vue": "^2.1.7",
    "qrcode.vue": "1.0",
    "table-dragger": "^1.0.3",
    "vue": "^2.6.12",
    "vue-property-decorator": "^8.5.1",
    "vue-virtual-scroller": "^1.0.10",
    "vuedraggable": "^2.24.3",
    "xlsx": "^0.16.9",
    "xlsx-js-style": "^1.2.0"
  },
  "devDependencies": {
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2"
  }
}

nuxt.config.js

export default {
  mode: "spa",
  /*
   ** Headers of the page
   */
  head: {
    title: "Demo App",
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      {
        hid: "description",
        name: "description",
        content: "Description"
      }
    ],
    script: [
      { src: "/scripts/resizableGrid.js" },
      { src: "https://unpkg.com/[email protected]/moment.js" },
      {
        src: "https://unpkg.com/[email protected]/dist/FileSaver.min.js"
      },
      { src: "https://unpkg.com/@otplib/preset-browser@^12.0.0/buffer.js" },
      { src: "https://unpkg.com/@otplib/preset-browser@^12.0.0/index.js" },
      { src: "https://www.gstatic.com/firebasejs/9.1.1/firebase-app-compat.js" },
      { src: "https://www.gstatic.com/firebasejs/9.1.1/firebase-functions-compat.js" },
      { src: "https://www.gstatic.com/firebasejs/9.1.1/firebase-auth-compat.js" },
      { src: "https://www.gstatic.com/firebasejs/9.1.1/firebase-analytics-compat.js" },
      { src: "https://www.gstatic.com/firebasejs/9.1.1/firebase-firestore-compat.js" },
      { src: "https://www.gstatic.com/firebasejs/9.1.1/firebase-storage-compat.js" },
      // { src: "https://unpkg.com/buefy/dist/buefy.min.js" },
      {
        src:
          "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"
      },
      { src: "https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js" }
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico?v2" },
      {
        rel: "stylesheet",
        href: "https://use.fontawesome.com/releases/v5.10.2/css/all.css"
      },
      {
        rel: "stylesheet",
        href:
          "https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round"
      }
    ]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: "#fff" },
  /*
   ** Global CSS
   */
  css: ["@/assets/scss/main.scss"],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    "@/plugins/extensions",
    "@/plugins/tree-node",
    "@/plugins/asideMenuList",
    "@/plugins/reportLine",
    "@/plugins/firebase",
    "@/plugins/mfa",
    "@/plugins/functions.js",
    "@/plugins/groups.js",
    "@/plugins/accountSort.js",
    "@/plugins/auth.js",
    "@/plugins/inactivitylogout.js",
    "@/plugins/buefy.js",
    "@/plugins/portal.js",
    "@/plugins/images.js",
    "@/plugins/mask.js",
    "@/plugins/colReorder.js",
    "@/plugins/virtualscroll.js",
    "@/plugins/highlightfilter.js",
    "@/plugins/withRoot.js",
    "@/plugins/colResize.js",
    "@/plugins/condition.js",
    "@/plugins/error.js",
    "@/plugins/storage.js",
    "@/plugins/eventbus.js"
  ],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [],
  /*
   ** Nuxt.js modules
   */
  modules: [

    "nuxt-buefy",
    "@nuxtjs/pwa",
    "@nuxtjs/dotenv"

  ],

  /*
   **env variables available to client
   */

  env: {
    ...process.env
  },
  
/*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    //analyze: true,
    extractCSS: true
    // extend(config, ctx) {
    //   config.resolve.alias["vue"] = "vue/dist/vue.common";
    // }
  }
};

nuxt.config.js 包含“...process.env”调用，但明显缺少“require('dotenv').config()”或 dotnev 导入或路径定义的任何其他决定因素。

.gitignore 确实指定：

# dotenv environment variables file
.env

这让我相信他们没有使用变量 .env.development、.env.production 等环境凭证。

我已经尝试在 .env 文件中包含我的 Firebase 开发项目的环境凭据，但没有成功。

TL/博士 如何根据上面的包和 nuxt 配置设置 .env 用于开发和扩展 Firebase 部署？？？

任何帮助将不胜感激。谢谢！