env 属性

在客户端和服务端之间共享环境变量。

• 类型: Object

Nuxt 允许创建在客户端和服务端之间共享的环境变量。

env 属性定义了可在客户端使用的环境变量，可以通过服务端环境变量或 dotenv 模块 等进行赋值。

为了更好地排查问题，请务必阅读下面关于 process.env 和 process.env == {} 的内容。

export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

这样可以创建一个 baseUrl 属性，如果服务端环境变量 BASE_URL 可用或已定义，则等于 BASE_URL；否则客户端的 baseUrl 为 'http://localhost:3000'。服务端环境变量 BASE_URL 通过 nuxt.config.js 的 env 属性复制到客户端，或者定义其他值。

访问 baseUrl 变量有两种方式：

1. 通过 process.env.baseUrl 访问。
2. 通过 context.env.baseUrl 访问，详见 context API 。

例如，可以使用 env 属性提供公共令牌。

以上述示例为例，可以使用 env 属性配置 axios 。

import axios from 'axios'

export default axios.create({
  baseURL: process.env.baseUrl
})

这样就可以在页面中通过 import axios from '~/plugins/axios' 导入 axios。

环境变量自动注入

如果在构建阶段定义了以 NUXT_ENV_ 开头的环境变量（例如 NUXT_ENV_COOL_WORD=freezing nuxt build 或 Windows 控制台的 SET NUXT_ENV_COOL_WORD=freezing & nuxt build），这些变量会自动注入到进程环境中。注意它们会优先于 nuxt.config.js 中定义的同名变量。

process.env == {}

注意 Nuxt 使用 webpack 的 definePlugin 来定义环境变量，这意味着 Node.js 的实际 process 或 process.env 既不可用也未定义。nuxt.config.js 中定义的 env 属性会分别映射到 process.env.xxxx 并在编译时转换。

也就是说，console.log(process.env) 会输出 {}，但 console.log(process.env.your_var) 会输出定义的值。当代码被 webpack 编译时，所有 process.env.your_var 的出现都会被替换为定义的值。例如，env.test = 'testing123' 会将代码中所有 process.env.test 替换为 'testing123'。

替换前：

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

替换后：

if ('testing123' == 'testing123')

serverMiddleware

serverMiddleware 与主 Nuxt 构建分离，因此无法使用 nuxt.config.js 中定义的 env 变量。