如何在Nginx与Vue.js应用中将环境变量注入process.env

首先得明确：浏览器端的JS里本来没有process.env（这是Node.js环境的变量），前端构建工具（比如Vue CLI）会在构建阶段把process.env.XXX替换成静态字符串，所以想在Nginx运行时动态修改，必须换思路——用占位符替换，而不是直接操作process.env。

为什么你之前的方法无效 #

• fastcgi_param：是给PHP这类FastCGI后端程序传参的，和前端JS完全无关。
• set/set_by_lua：设置的是Nginx内部变量，前端JS无法读取。
• sub_filter：你之前替换的VUE_APP_API_URL2在构建后的JS里根本不存在，因为构建时process.env已经被替换成静态值了，自然找不到要替换的内容。

具体实现步骤 #

1. 前端代码预留占位符 #

修改你的auth.js，不要直接用process.env，而是用一个自定义的占位符（比如__VUE_APP_API_URL__）：

// auth.js
const apiUrl = '__VUE_APP_API_URL__';
console.log('当前API地址:', apiUrl);
// 如果需要全局使用，可以挂载到window对象
window.VUE_APP_API_URL = apiUrl;

2. 配置Nginx的sub_filter模块 #

确保你的Nginx已经安装了ngx_http_sub_module（大部分官方镜像默认包含，若自行编译需加--with-http_sub_module参数）。

创建nginx.conf.template模板文件：

# 声明要读取的环境变量
env VUE_APP_API_URL;

server {
    listen 80;
    root /usr/share/nginx/html;

    location / {
        try_files $uri $uri/ /index.html;
        # 替换JS里的占位符为环境变量的值
        sub_filter '__VUE_APP_API_URL__' '$env_VUE_APP_API_URL';
        # 如果页面中有多个相同占位符，开启这个确保全部替换
        sub_filter_once off;
    }
}

3. Docker部署时传递环境变量 #

编写Dockerfile，用envsubst处理模板文件，启动Nginx时注入环境变量：

FROM nginx:alpine

# 复制前端构建产物到Nginx静态目录
COPY dist/ /usr/share/nginx/html/
# 复制Nginx配置模板
COPY nginx.conf.template /etc/nginx/nginx.conf.template

# 启动时替换模板中的变量，再启动Nginx
CMD ["/bin/sh", "-c", "envsubst '$VUE_APP_API_URL' < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf && nginx -g 'daemon off;'"]

4. 运行Docker容器时传递环境变量 #

启动容器时，用-e参数传入环境变量：

docker run -d -p 80:80 -e VUE_APP_API_URL="https://your-real-api.com" your-image-name

这样，Nginx启动时会把配置里的$env_VUE_APP_API_URL替换成你传入的真实值，然后通过sub_filter把JS里的占位符替换成这个值，前端就能拿到动态的环境变量了。

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