你不知道的Nuxt环境变量配置方案

前置知识: vite中多环境配置

• vite中，我们在package.json中配置mode后，就可以在代码中使用import.meta.env，获取不同.env文件的环境配置信息

 "scripts": {
    "serve": "vite",	//未指定默认取.env中的配置
    "dev": "vite --mode dev",   // 取 .env.dev文件中的配置
    "pro": "vite --mode pro",   // 取 .env.pro文件中的配置
    "build": "vue-tsc --noEmit && vite build",	//未指定默认取.env中的配置
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",    // build的时候取dev的配置
    "build:pro": "vue-tsc --noEmit && vite build --mode pro", 	// build的时候取pro的配置
    "preview": "vite preview"
  },

// 使用
console.log(import.meta.env) 
// {mode：xxx，......}

如何配置可参考: vite中环境变量的使用与配置（非常详细）

但在nuxt中无法在package.json中直接改变import.meta.env的mode

• nuxt build 的mode是固定的 production
• nuxt dev 的mode固定是 development
• nuxt generate 的mode是固定的 production

  "scripts": {
    "build": "nuxt build --mode test", // 结果还是取.env.production配置
    "dev": "nuxt dev --mode production", // 结果还是取.env.development配置
    "generate": "nuxt generate --mode test", // 结果还是取.env.production配置

  },

在nuxt中配置多环境确实是个十分头疼的问题

如何解决nuxt多环境配置

本次测试项目使用nuxt3搭建

经过多次调试，我终于发现了更方便的解决方案，不需要下载插件，不用在代码内进行判断，仅需几行代码

主要原理：

• import.meta.env会自动获取process.env中VITE_开头的信息，因此只需要在process.env中添加环境信息即可

nuxt.config.ts

// 环境变量配置
import { loadEnv } from 'vite'
const envName = process.env.npm_lifecycle_script.match(/--mode\s(.*)/)?.[1]
const envData = loadEnv(envName, process.cwd()) // 获取.env文件中的配置
Object.assign(process.env,envData) // 将环境配置信息，添加到process.env

package.json

"scripts": {
  "build": "nuxt build",// 未指定默认取.env.production文件中的配置
  "build:pre": "nuxt build --mode test",// 取 .env.test中的配置
  "dev": "nuxt dev",// 未指定默认取.env.development中的配置
  "dev:pro": "nuxt dev --mode production",// 取 .env.production中的配置
  "generate:pre": "nuxt generate --mode test",// 取 .env.test中的配置
  "generate": "nuxt generate --mode production",
  "preview": "nuxt preview"
},

使用：

• 项目中直接调用import.meta.env，如：

request.ts

const service: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_APP_SERVICE_URL as string,
  timeout: 30000,
})

注意：在.env文件中需要使用VITE_开头

VITE_APP_HAMBIT_IMG_HOST = "xxx"
VITE_APP_IMG_HOST = "xxx"
VITE_APP_SERVICE_URL = 'xxxx'

附：nuxt环境配置的常规解决方案

网上关于nuxt环境配置的方案很多,这里列举其中的部分

方法1.使用cross-env配置环境变量

• 使用cross-env更改环境变量，再判断当前环境变量，使用不同的环境配置。

参考：nuxt通过cross-env配置环境变量

方法2.将环境配置信息放入publicRuntimeConfig中

• 将环境信息放到配置中，在其他地方通过useRuntimeConfig获取

参考：nuxt3中配置不同开发环境以及如何使用(配置环境变量）

方法3.使用@nuxtjs/dotenv

参考：多环境配置 （开发、测试、生产）