时间戳

首页 > 解决方案 > 如何在生产中将环境变量传递给 nuxt？

vue.js - 如何在生产中将环境变量传递给 nuxt？

问题描述

nuxt.config.js

modules: [
    '@nuxtjs/dotenv'
  ],

服务器/index.js

const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const host = process.env.HOST || '0.0.0.0'
const port = 8080
app.set('port', port)
// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

const Storage = require('@google-cloud/storage')
const dotenv = require('dotenv')


async function getEnv() {
  if (config.dev) {
    dotenv.config({ path: '.env' })
    console.log('Environment local .env file loaded.')
    console.log(process.env.LOCALE)

    return
  }

  try {

    const bucketName = 'env-var'

    const dotEnvSourcePath = `.env`
    const dotEnvDestinationPath = `/tmp/${dotEnvSourcePath}`
    const storage = new Storage({})

    await storage
      .bucket(bucketName)
      .file(dotEnvSourcePath)

      .download({ destination: dotEnvDestinationPath })
    console.log(
      `gs://${bucketName}/${dotEnvSourcePath} downloaded to ${dotEnvDestinationPath}.`
    )


    dotenv.config({ path: dotEnvDestinationPath })


  } catch (err) {
    console.error('ERROR:', err)
  }
}

async function afterEnvProcess() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
  const fs = require('fs')

  const dotEnvExists = fs.existsSync('.env')
}

getEnv()
  .then(r => afterEnvProcess())
  .catch(e => console.log(e))

我得到了在生产中运行应用程序时process.env.<variable>的值。undefined在开发中运行时，我得到了正确的值。似乎 env 变量没有被传递给 nuxt env 属性。

编辑 1：当我使用 process.env 控制台记录环境变量时，我可以在谷歌云日志中看到正确的值。但同时这些控制台日志语句在浏览器控制台中显示未定义

标签： vue.jsnuxt.js

解决方案

大多数人都使用dotenv包，但我不喜欢这个解决方案，因为它增加了为生产和开发管理不同的额外文件的需要，而您可以自动化 webpack 以使用正确的值而无需额外的麻烦。

更简单的方法：

//package.json
  "scripts": {
    "dev": "NODE_ENV=dev nuxt"
  }

//nuxt.config.js
  env: {
    baseUrl:
      process.env.NODE_ENV === 'dev'
        ? 'http://localhost:3000'
        : 'https://my-domain.com'
  }

这将允许您通过调用来使用正确的值process.env.baseUrl。请注意，您可以使用console.log(process.env.baseUrl)但不能验证这一点console.log(process.env)，至少在 Chrome 中是这样。

推荐阅读