nuxt3配置多环境变量(2023年3月26日)
匿名 · 更新于 2023/3/26
11月16日nuxt3.0正式发布，获取环境变量可以通过 useRuntimeConfig()里面的public获取，不放在public里面话，客户端渲染是找不到变量的
直接上代码，在 nuxt.config.ts 上
import { defineNuxtConfig } from 'nuxt'
import { loadEnv } from 'vite'
interface VITE_ENV_CONFIG {
VITE_API_HOST: string
VITE_PACK_ENV: string
VITE_PACK_URL: string
}
const envScript = (process.env as any).npm_lifecycle_script.split(' ')
const envName = envScript[envScript.length - 1] // 通过启动命令区分环境
const envData = loadEnv(envName, 'env') as unknown as VITE_ENV_CONFIG
console.log('当前环境：', envData)
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
runtimeConfig: {
public: envData // 把env放入这个里面，通过useRuntimeConfig获取
},
vite: {
envDir: '~/env', // 指定env文件夹
}
})
把拿到的环境变量放在runtimeConfig里面
然后在项目根目录新建一个env文件夹
每个env文件设置不同的变量，例如env.dev文件的内容如下：
# 测试环境打包变量
VITE_PACK_ENV = test
VITE_PACK_URL = /
VITE_API_HOST = https://test.cn
VITE_API_PREFFIX = /test/
这里随便添加什么变，需要以VITE_开头，然后通过useRuntimeConfig都能获取到这些变量
然后再package.json添加如图所示
需要打包哪个环境就执行，例如打包正式环境：npm run build-production
