Vue+Rails API生产环境下VITE环境变量加载异常求助

以下是针对你的场景（Vite+Vue+Rails API+Nginx反向代理）的排查和解决步骤：

1. 确认环境变量的读取方式是否正确 #

Vite的环境变量必须通过import.meta.env.VITE_*读取，别用Webpack那套process.env写法。先在Pinia store里直接打印原始变量，确认读取逻辑没错：

// 在你的Pinia store中添加这个打印
console.log('原始环境变量:', import.meta.env.VITE_BACKEND_URL);

如果这个打印出来就缺/api，问题出在变量加载环节；如果是正确的，那就是后续代码处理时把后缀去掉了。

2. 排查是否有其他环境文件覆盖变量 #

Vite环境变量优先级：.env.production.local > .env.production > .env.local > .env。检查frontend目录下所有.env*文件：

• 确保只有.env.production里定义了VITE_BACKEND_URL=http://www.example.net/api
• 其他文件（比如.env、.env.local）要么不定义这个变量，要么定义正确的带/api路径

另外可以在build前终端确认变量值：

• Linux/macOS：在package.json的scripts里加"prebuild": "echo $VITE_BACKEND_URL"，执行yarn build时会先打印变量
• Windows：改成"prebuild": "echo %VITE_BACKEND_URL%"

3. 清除Vite构建缓存 #

旧缓存可能导致变量没更新，执行以下操作：

• 删除frontend目录下的dist文件夹
• 删除node_modules/.vite文件夹
• 重新执行yarn build --mode production，或者加--no-cache参数强制无缓存构建：yarn build --mode production --no-cache

4. 检查Pinia store中的变量处理逻辑 #

看看你是不是在Pinia里对变量做了额外处理，比如不小心截取了域名部分：

// 错误示例：这种写法会丢掉/api后缀
const baseUrl = new URL(import.meta.env.VITE_BACKEND_URL).origin;

// 正确写法：直接用原始变量
const baseUrl = import.meta.env.VITE_BACKEND_URL;

如果要拼接接口路径，确保在原始变量后追加，比如${baseUrl}/users，别重新拼接域名。

5. 排查Nginx配置是否修改了前端内容 #

如果Nginx用了sub_filter指令，可能会替换前端文件里的内容。检查你的Nginx server配置：

# 错误示例：这种配置会把/api后缀替换掉
sub_filter 'http://www.example.net/api' 'http://www.example.net';
sub_filter_once off;

如果有类似配置，注释掉或者修改成正确规则。

内容的提问来源于stack exchange，提问作者Maxime