Docker中Apache2虚拟主机SetEnv变量无法被VueJS读取问题

这个问题的核心是Vue的process.env和Apache的SetEnv完全不是一回事，搞清楚两者的运行阶段差异就明白问题出在哪了：

为什么你的SetEnv不生效？ #

Vue项目里的process.env是构建阶段由Webpack/Vue CLI注入的静态值，它只在你执行npm run build或者npm run serve的时候被处理，最终会被替换成具体的字符串打包到静态JS文件里。

而Apache的SetEnv是设置服务器端的环境变量，这些变量只能被运行在服务器上的程序（比如CGI脚本、PHP后端）读取，而Vue应用是运行在用户浏览器里的前端代码，根本访问不到Apache服务器的环境变量——两者完全不在同一个运行环境里。

正确的解决方法 #

方法一：构建时注入环境变量（推荐，适合固定值） #

Vue CLI会自动识别以VUE_APP_开头的环境变量，把它们注入到process.env中：

1. 在Vue项目根目录创建.env.local文件（或者.env.production对应生产环境），内容如下：

   VUE_APP_HELLO=Hello world
   

2. 执行npm run build构建项目，此时process.env.VUE_APP_HELLO就会被替换成"Hello world"打包到静态文件里。
3. 把构建好的dist目录下的所有文件复制到Apache的/usr/local/apache2/htdocs/first目录下即可。

你也可以直接在构建命令里临时指定变量：

VUE_APP_HELLO='Hello world' npm run build

方法二：运行时动态注入（适合需要服务器端动态调整的场景） #

如果你的环境变量需要在服务器端动态修改（不用重新构建Vue项目），可以通过Apache把变量注入到页面全局：

1. 先确保Apache启用了mod_substitute模块（httpd:2.4镜像默认应该已经启用，若没有可以用a2enmod substitute开启）。
2. 修改你的虚拟主机配置，添加内容替换规则：

   <VirtualHost *:80>
       # 原有配置...
       AddOutputFilterByType SUBSTITUTE text/html
       # 把页面里的__HELLO__占位符替换成Apache的HELLO环境变量值
       Substitute "s|__HELLO__|%{ENV:HELLO}|ni"
   </VirtualHost>
   

3. 在Vue项目的public/index.html中添加全局变量：

   <script>
       // 这里的__HELLO__会被Apache替换成实际的环境变量值
       window.SERVER_HELLO = '__HELLO__';
   </script>
   

4. 构建Vue项目并部署到Apache后，在Vue代码里通过window.SERVER_HELLO访问这个变量即可。

这样就能实现从Apache传递变量到前端Vue应用的需求了。

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