nuxt3配置多环境变量

直接上代码，在 nuxt.config.ts 上

import { defineNuxtConfig } from 'nuxt'
import { loadEnv } from 'vite'

interface VITE_ENV_CONFIG {
  VITE_API_HOST: string,
  VITE_API_PREFFIX: string,
  VITE_PACK_ENV: string,
  VITE_PACK_URL: string,
}

const envScript = process.env.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({
  publicRuntimeConfig: envData, // 把env放入这个里面，通过useRuntimeConfig获取
  meta: {
    meta: [
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
  },
  css: [],
  components: {
    global: true,
    dirs: ['~/components']
  },
  build: {
    extractCSS: true
  },
  vite: {
    envDir: '~/env', // 指定env文件夹
  }
})

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

 

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

 

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

# 测试环境打包变量
VITE_PACK_ENV = 'test'
VITE_PACK_URL = '/'
VITE_API_HOST = 'https://test.cn'
VITE_API_PREFFIX = '/test/'

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

 

然后再package.json添加如图所示

 

需要打包哪个环境就执行，例如打包正式环境：npm run build-production

 

 

如果在自定义ts中使用环境变量，请在顶部引入
 

import { useRuntimeConfig } from '../node_modules/nuxt/dist/app'