Nuxt3最新-02环境变量

nuxt3中配置和使用环境变量的方法太乱了，简直🤢🤢🤢

runtimeConfig

配置1

// nuxt.config.ts
export default defineNuxtConfig({
	runtimeConfig: {
		apiTest: 'runtimeConfig/apiTest', // 仅在服务端可获取
		apiSecret: '',
		public: {
			apiTest: 'runtimeConfig/public/apiTest', // 客户端也可获取
			apiBase: 'apiBase', // 可以被.env中的NUXT_PUBLIC_API_BASE 替换掉
		},
	},
})

配置2

# rootDir/.env 文件
# NUXT_开头的可以替换掉 runtimeConfig 中的同名变量
NUXT_API_SECRET=api_secret_token
# NUXT_PUBLIC_API_BASE=https://nuxtjs.org

使用及输出

const runtimeConfig = useRuntimeConfig()

// runtimeConfig
{ "public": { "apiTest": "runtimeConfig/public/apiTest", "apiBase": "apiBase" }, "app": { "baseURL": "/", "buildAssetsDir": "/_nuxt/", "cdnURL": "" } }

appConfig

配置

// rootDir/app.config.ts
export default defineAppConfig({
	apiTest: '/app.config.ts/apiTest',
	title: 'Hello Nuxt',
	theme: {
		dark: true,
		colors: {
			primary: '#ff0000',
		},
	},
})

使用及输出

const appConfig = useAppConfig()

// appConfig
{ "apiTest": "/app.config.ts/apiTest", "title": "Hello Nuxt", "theme": { "dark": true, "colors": { "primary": "#ff0000" } } }

process

默认配置

使用及输出

const processData = process
// processData
{ "dev": true, "server": false, "client": true }

process.env

配置

# rootDir/.env

NUXT_PORT=8080
NUXT_HOST=nuxt3.tpl.com
VITE_NUXT_API_TEST=env/test
API_SECRET = "456"
tian = 11223333

# NUXT_开头的可以替换掉 runtimeConfig 中的同名变量
NUXT_API_SECRET=api_secret_token
# NUXT_PUBLIC_API_BASE=https://nuxtjs.org

使用及输出

const env = process.env
// .env文件中的所有配置和系统默认配置

import.meta.env

和vite变量规则保持一致，包括.env.*文件的设置。 参考vite

配置

# 必须以VITE_开头的变量
VITE_NUXT_API_TEST=env/test222
VITE_NUXT_API_TEST22=env/test222

使用及输出

const metaEnv = import.meta.env

// metaEnv
{ "VITE_NUXT_API_TEST": "env/test", "VITE_NUXT_API_TEST22": "env/test222", "BASE_URL": "/_nuxt/", "MODE": "development", "DEV": true, "PROD": false, "SSR": false }