NuxtJS3配置多环境变量

1.在根目录添加开发环境.env.development

# 本地环境
NODE_ENV = development
VUE_APP_NUXT_API_URL = /api
NUXT_BASE_PORT = 3000
NUXT_BASE_LINK = http://192.168.21.80:6000
NUXT_SYSTEM_TITLE = xx管理系统

2.在根目录添加测试环境.env.test

# 测试环境
NODE_ENV = test
NUXT_API_URL = /official
NUXT_BASE_PORT = 3000
NUXT_BASE_LINK = http://192.168.21.80:6000
NUXT_SYSTEM_TITLE = xx管理系统

3.在根目录添加正式环境.env.production

# 生产环境
NODE_ENV = production
NUXT_API_URL = /official
NUXT_BASE_LINK = http://www.xxxx.com:6000
NUXT_BASE_PORT = 3000
NUXT_SYSTEM_TITLE = xx管理系统

4.在nuxt.config.ts中配置环境变量中的变量信息

export default defineNuxtConfig({devtools: { enabled: true },// 引入全局样式css: ["@/assets/style/main.css"],runtimeConfig: {// 仅在服务器端可用的私钥baseUrl: '/official', // 公共中的密钥也将公开给客户端public: {apiUrl: process.env.NUXT_API_URL, baseLink: process.env.NUXT_BASE_LINK}},nitro: {devProxy: {"/api": {target: 'http://192.168.21.80:6000/official',prependPath: true,changeOrigin: true,}},// 该配置用于服务端请求转发routeRules: {'/api/**': {proxy: 'http://192.168.21.80:6000/official/**'}}}
})

5.配置package.json文件

使用 --dotenv指定环境
官网参考链接：https://nuxt.com/docs/api/commands/build

{"scripts": {"dev": "nuxt dev","dev-test": "nuxt dev --dotenv .env.test","dev-prod": "nuxt dev --dotenv .env.production","build": "nuxt build","build-test": "nuxt build --dotenv .env.test","build-prod": "nuxt build --dotenv .env.production","generate": "nuxt generate","preview": "nuxt preview","postinstall": "nuxt prepare"}
}