VueJs 项目 - Vue-cli 和 npm 运行 build

Question

所以我目前正在使用 Vue-cli 和 webpack 构建一个 vuejs 应用程序。我的网站严重依赖 Firebase 数据库，因此在我的 main.js 文件中有以下代码：

new Vue({
  el: '#app',
  router,
  ...layout,
  store,

  created () {
    firebase.initializeApp({
      apiKey: MYKEY,
      authDomain: 'foo.firebaseapp.com',
      databaseURL: 'https://foo.firebaseio.com',
      projectId: 'foo'
    })
  }

效果很好，但是，我想在上线（生产）时使用不同的 Firebase 数据库。

因此，当我运行 'npm run build' 时，我想将 firebase.initializeApp 代码更改为如下内容：

    firebase.initializeApp({
      apiKey: MYKEY-PRODUCTION,
      authDomain: 'production.firebaseapp.com',
      databaseURL: 'https://production.firebaseio.com',
      projectId: 'production'
    })

使用 VUE-CLI 执行此操作的正确方法是什么。

期待大家的帮助。

Answer 1

Myfirebase 是将 firebase 与 vuejs 结合使用的一个很好的起点，它在幕后为您做了很多预配置。

Answer 2

转到位于项目根目录的配置文件夹。您应该看到两个文件：dev.env.js 和 prod.env.js

在这些文件中您可以定义变量。所以在 prod.env.js 中定义一个 firebaseConfig 变量：

module.exports = {
  NODE_ENV: '"production"',
  firebaseConfig: {
    apiKey: MYKEY-PRODUCTION,
    authDomain: 'production.firebaseapp.com',
    databaseURL: 'https://production.firebaseio.com',
    projectId: 'production'
  }
}

并在 dev.env.js 中对您的 'foo' 项目执行相同的操作。

然后在vuejs组件中，写：

firebase.initializeApp(process.env.firebaseConfig)

因此，当您运行 npm 运行 dev 时，firebaseConfig 将具有您的 dev.env.js 文件.

并且当你运行 npm 运行 build ... build.[= 的内容37=]

VueJs 项目 - Vue-cli 和 npm 运行 build

VueJs project - Vue-cli and npm run build

firebase

webpack

vue.js

firebase-realtime-database

vue-cli