Question

nuxt.config.js

modules: [
    '@nuxtjs/dotenv'
  ],

server / 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控制台记录环境变量时，我可以在Google云日志中看到正确的值。但同时，这些控制台日志语句在浏览器控制台中显示未定义

Answer 1

在构建时捆绑了Env变量。因此，在构建生产版本时需要设置它们

它们将在运行时在server / index.js中可用，但是在nuxt build dist时，它将process.env。*替换为在构建时传递的值，因此启动时传递的内容并不重要服务器为此变量。

Answer 2

大多数人使用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使用正确的值。请注意，至少在Chrome中，您可以使用console.log(process.env.baseUrl)而不是console.log(process.env)进行验证。

Answer 3

您可以构建Nuxt进行生产，而无需任何环境变量。然后将其设置在nuxtServerInit的存储中。

我为此使用env-cmd。

我有.env-cmdrc文件，其中包含下一个内容：

{
  "production": {
    "API_URL": "https://api.example.com/",
    "IMG_URL": "https://img.example.com/",
    "ENV_PATH": "./.cmdrc.json"
  },
  "staging": {
    "API_URL": "https://stage.example.com/",
    "IMG_URL": "https://stage.img.shavuha.com/",
    "ENV_PATH": "./.cmdrc.json"
  },
  "development": {
    "API_URL": "https://stage.api.example.com/",
    "IMG_URL": "https://stage.img.example.com/",
    "ENV_PATH": "./.cmdrc.json"
  }
}

在商店中，我有这样的东西：

export const state = () => ({
  api_url: '',
  img_url: ''
})

export const mutations = {
  SET_PROCESS_ENV: (state, payload) => {
    state.api_url = payload.api_url
    state.img_url = payload.img_url
  }
}

nuxtServerInit操作：

  commit('settings/SET_PROCESS_ENV', {
    api_url: process.env.API_URL,
    img_url: process.env.IMG_URL
  })

package.json：

"dev": "env-cmd -e development -r .env-cmdrc nuxt",
"build": "nuxt build",
"start_stage": "env-cmd -e staging -r .env-cmdrc nuxt start",

Answer 4

nuxt.config.env搞砸了！

对于包括我在内的将来的Googler来说，这是一个令人烦恼的陷阱，而nuxt.config.js并不能很好地说明问题。

process.env.SOMETHING实际上在构建过程中被替换为config.env.SOMETHING值

构建之前

    if (process.env.SOMETHING == 'testing123')

构建后

    if ('testing123' == 'testing123')

这也不适用于对象！只是文字。

// This won't work for you!
mounted() {
  console.log('process.env', process.env)
}

https://nuxtjs.org/api/configuration-env/

Answer 5

我创建了一个函数，即使在生产中也可以从public async Task<ActionResult> ResetUserPassword(string id, string Password) { // Find User var user = await context.Users.Where(x => x.Id == id).SingleOrDefaultAsync(); if (user == null) { return RedirectToAction("UserList"); } await UserManager.RemovePasswordAsync(id); // Add a user password only if one does not already exist await UserManager.AddPasswordAsync(id, Password); return RedirectToAction("UserDetail", new { id = id }); }更新模块设置。

仅设计用于数组样式的模块配置语法。像这样

/server/index.js

nuxt.config.js

['@nuxtjs/google-gtag', { ... }]

Answer 6

正如@Aldarund之前所说：环境变量是在构建时设置的，而不是在运行时设置的。

从Nuxt.js 2.13+开始，您可以使用运行时配置和内置的dotenv支持。这样可以提供更好的安全性和更快的开发。

要在运行时将环境变量用作axios baseUrl，可以使用：

publicRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL
    }
  },

有关运行时配置的更多信息：https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/

有关axios运行时配置的更多信息：https://axios.nuxtjs.org/options

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

6 个答案: