Nuxt 3环境变量读取问题解决方案
原创
Nuxt 3环境变量读取问题解决方案
原创
曾高飞
发布于 2025-05-17 12:34:28
发布于 2025-05-17 12:34:28
代码可运行
运行总次数：0
代码可运行
在 Nuxt 3 项目中，你遇到的 process.env.API_BASE_URL 读取不到的问题通常与环境变量的配置方式有关。以下是可能的原因和解决方案：
常见问题原因 环境变量未正确暴露给客户端： Nuxt 3 中，只有以 NUXTPUBLIC 或 NITRO_ 为前缀的环境变量才会自动暴露给客户端和服务端 普通的 process.env 变量只在构建时可用 .env 文件未正确加载： 确保你的 .env 文件在项目根目录 确认文件内容格式正确（API_BASE_URL=#） 运行环境问题： 确保你在运行项目前已经设置了环境变量 解决方案 修改环境变量命名： 在 .env 文件中：
NUXT_PUBLIC_API_BASE_URL=https://www.fglt.me/然后修改配置：
nitro: {
devProxy: process.env.NODE_ENV === 'development' ? {
'/jp': {
target: process.env.NUXT_PUBLIC_API_BASE_URL,
changeOrigin: true,
secure: false,
}
} : undefined,
routeRules: process.env.NODE_ENV !== 'development' ? {
'/jp/**': {
proxy: `${process.env.NUXT_PUBLIC_API_BASE_URL}/**`,
}
} : undefined
}1.使用 runtimeConfig（推荐）
export default defineNuxtConfig({
runtimeConfig: {
public: {
apiBaseUrl: process.env.API_BASE_URL || '默认值'
}
},
// 其他配置...
})然后通过 useRuntimeConfig() 访问
确保环境文件加载： 在 nuxt.config.ts 顶部添加：
import { loadEnv } from 'vite'
const env = loadEnv(process.env.NODE_ENV, process.cwd(), '')调试建议 在 nuxt.config.ts 中添加临时调试：
console.log('API_BASE_URL:', process.env.API_BASE_URL)检查构建后的输出，确认环境变量是否被正确替换 确保你的服务器环境（如果是部署的）也设置了相同的环境变量 完整示例配置
export default defineNuxtConfig({
nitro: {
devProxy: process.env.NODE_ENV === 'development' ? {
'/jp': {
target: process.env.NUXT_PUBLIC_API_BASE_URL,
changeOrigin: true,
secure: false,
}
} : undefined,
routeRules: process.env.NODE_ENV !== 'development' ? {
'/jp/**': {
proxy: `${process.env.NUXT_PUBLIC_API_BASE_URL}/**`,
}
} : undefined
},
runtimeConfig: {
public: {
apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL
}
}
})通过以上调整，你的环境变量应该能够被正确读取了。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
