多环境配置

获取环境变量可以通过 useRuntimeConfig()里面的public获取，不放在public里面话，客户端渲染是找不到变量的

安装@types/node 本地安装 Node 的 TypeScript 类型描述文件即可解决编译器报错

npm i --save-dev @types/node

//nuxt.config.ts 
import { loadEnv } from 'vite'

interface VITE_ENV_CONFIG {
    VITE_API_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

// ts文件中调用环境变量
// const config = useRuntimeConfig()
// console.log(config)

console.log('当前环境：', envData)
console.log('当前环境：', envData.VITE_API_URL)
export default defineNuxtConfig({
   runtimeConfig: {
        public:{
           baseUrl: envData.VITE_API_URL // 把env放入这个里面，通过useRuntimeConfig获取
        }
    },
    vite: {
        envDir: '~/env', // 指定env文件夹
    },
})

把拿到的环境变量放在runtimeConfig里面

然后在项目根目录新建一个env文件夹

每个env文件设置不同的变量，例如env.dev文件的内容如下：

# 开发环境请求接口地址
VITE_API_URL=https://nuxtjs.org/dev

这里随便添加什么变，需要以VITE_开头，然后通过useRuntimeConfig都能获取到这些变量

然后随便写个axios请求后，请求的地址就改变了