NuxtJS 在nuxt.config.ts中使用环境变量的注意事项

NuxtJS 在nuxt.config.ts中使用环境变量的注意事项

引入

注意到这个问题是因为发现在服务器上无论如何修改环境变量,反向代理到的后端地址永远不变。

问题

nuxt.config.ts 不会被“编译”成一个独立的配置文件,它的内容会被“拆解”并“硬编码(Hardcoded)”进 .output/server 目录下的多个 JavaScript 源码包(Chunks)里。

因此如果在这里引用环境变量,只会在编译的时候读取一次,相关产物最终写入的都是编译时的环境变量的值,不会在编译的时候改变

示例,NUXT_BACKEND_URL(这里的值是 http://vps.lolicon.llc:12345/api)只在编译的时候读取,此后不会改变:

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

ON THIS PAGE