Nuxt项目将config.js引入Vuex store时.env变量读取异常问题求解

问题原因 #

1. 动态读取config返回undefined #

核心问题是拼写错误：

• 你代码中所有的enviorment均为拼写错误，正确写法为environment
• 第一种写法中的config.developmemt也是拼写错误，正确写法为development
  第一种写法能正常运行，说明你config.js内的导出key也写错成了developmemt，而process.env中对应键名是正确的environment，你用拼写错误的process.env.enviorment取值拿到的是undefined，自然config[undefined]也返回undefined。

2. store/app.js顶层读取process.env返回undefined #

你使用的是Nuxt框架的SSR模式，默认情况下.env中只有带指定前缀的变量才会被同时注入到服务端、客户端运行时：

• Nuxt2要求前缀为NUXT_ENV_
• Nuxt3要求公共变量前缀为NUXT_PUBLIC_，私有变量前缀为NUXT_PRIVATE_
  普通自定义变量仅在构建阶段的Node环境、客户端运行时生效，服务端预执行store顶层代码时无法读取。
  另外你在顶层打印this.app必然返回undefined，因为模块顶层的this指向模块作用域，不是Nuxt实例，Nuxt实例仅能在store的action、mutation、插件上下文等运行时逻辑中获取。

3. state赋值错误 #

你代码中environment: eviron属于拼写错误，前面定义的变量是environ，少写了字母n。

解决方案 #

1. 统一修正所有拼写 #

将全量代码中的拼写错误全部修正，同时确保config.js的导出key和.env中environment的取值完全匹配。

2. 调整环境变量配置 #

给.env中的环境变量加上对应前缀，示例：

# Nuxt2 写法
NUXT_ENV_ENVIRONMENT=development

# Nuxt3 公共变量写法
NUXT_PUBLIC_ENVIRONMENT=development

读取时使用对应全称：process.env.NUXT_ENV_ENVIRONMENT/process.env.NUXT_PUBLIC_ENVIRONMENT。

3. 优化store取值逻辑 #

不要在store文件顶层读取配置，建议直接在state函数内部读取：

import config from '@/config'

export const state = () => ({
  environment: config[process.env.NUXT_ENV_ENVIRONMENT]
})

如果需要更灵活的注入方式，可以新增Nuxt插件将配置挂载到store：

// plugins/env.js
export default ({ $config, store }) => {
  store.commit('app/setEnvironment', config[$config.public.environment])
}

然后在store/app.js中新增对应mutation存储环境配置即可。

内容的提问来源于stack exchange，提问作者Jamie