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

转到位于项目根目录的config文件夹。您应该看到两个文件：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'
  }
}

使用你的'foo'项目在dev.env.js中做同样的事情。

然后在vuejs组件中写下：

firebase.initializeApp(process.env.firebaseConfig)

因此，当您运行 npm run dev 时，firebaseConfig将包含 dev .env.js文件的内容。

当你运行 npm run build ... build .env.js

的内容时

Answer 2

Myfirebase是使用firebase和vuejs的一个很好的起点，它在幕后为你做了很多预配置。

VueJs项目 - Vue-cli和npm run build

2 个答案: