NuxtJS 在nuxt.config.ts中使用环境变量的注意事项
ShirakawaTyu2026/01/20技术博客NuxtJS 环境变量使用nuxt.config.ts 配置注意事项环境变量硬编码问题服务器配置与部署问题反向代理地址固定问题编译时环境变量读取配置文件拆解机制动态配置无法生效问题Nuxt3 环境变量处理方式SEO优化标签生成
NuxtJS 在nuxt.config.ts中使用环境变量的注意事项
引入
注意到这个问题是因为发现在服务器上无论如何修改环境变量,反向代理到的后端地址永远不变。
问题
nuxt.config.ts 不会被“编译”成一个独立的配置文件,它的内容会被“拆解”并“硬编码(Hardcoded)”进 .output/server 目录下的多个 JavaScript 源码包(Chunks)里。
因此如果在这里引用环境变量,只会在编译的时候读取一次,相关产物最终写入的都是编译时的环境变量的值,不会在编译的时候改变。
示例,NUXT_BACKEND_URL(这里的值是 http://vps.lolicon.llc:12345/api)只在编译的时候读取,此后不会改变:

编译后的产物(节选自chunks/_/nitro.mjs),可以看到已经被硬编码进去了:
