VueJs project - Vue-cli and npm run 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运行构建'时，我想将firebase.initializeapp代码更改为这样的东西：

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

使用vue-cli的正确方法是什么。

我期待着您的帮助。

Answer 1

转到位于项目根部的配置文件夹。您应该看到两个文件：dev.env.js and 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运行dev 时，FirebaseConfig将具有您的 dev .env.js file的内容。

运行 npm运行构建 ... 构建的内容 .env.js

Answer 2

myfirebase是与vuejs一起使用firebase的好起点，它在幕后为您提供了很多预配置。