如何在Vite(VueJS)中引用Azure容器应用的密钥？

核心原因 #

Vite默认是构建时注入环境变量，两个关键点导致你拿到undefined：

1. 未遵循Vite的环境变量命名规则：默认只有以VITE_开头的变量会被注入到import.meta.env中，你的APP_API_KEY不符合前缀要求；
2. 镜像构建完成后，前端代码已经被打包成静态文件，import.meta.env里的值是构建时固化的，运行时传递的环境变量无法直接被前端读取。

解决方案 #

方案1：构建时注入（适合不需要动态修改的场景）

如果只是需要在构建时注入变量，调整两个地方即可：

• 把变量名改为VITE_APP_API_KEY（符合Vite的前缀要求）；
• 构建时通过命令行或.env文件传递变量：

  # 命令行传递
  VITE_APP_API_KEY=your_key npm run build
  

  或者在项目根目录创建.env.production文件：

  VITE_APP_API_KEY=your_key
  

  构建完成后，代码里的import.meta.env.VITE_APP_API_KEY就能拿到对应值。

方案2：运行时动态注入（适合镜像构建后需要传参的核心场景）

因为镜像构建后代码是静态的，需要通过容器启动脚本动态生成环境变量配置：

1. 在前端项目的index.html头部添加一个脚本占位：

   <script id="env-script"></script>
   

2. 编写容器启动脚本（比如start.sh），在启动服务前动态生成环境变量脚本：

   #!/bin/sh
   # 生成环境变量配置文件
   cat > /usr/share/nginx/html/env.js <<EOF
   window.env = {
     APP_API_KEY: "$APP_API_KEY"
   }
   EOF
   # 替换index.html中的占位脚本
   sed -i 's/<script id="env-script"><\/script>/<script src="\/env.js"><\/script>/g' /usr/share/nginx/html/index.html
   # 启动服务（以Nginx为例）
   nginx -g 'daemon off;'
   

3. 前端代码中直接通过window.env.APP_API_KEY访问变量即可。

方案3：保留import.meta.env写法的折中方案

如果你想继续用import.meta.env的方式，可以在构建时留占位符，启动时替换：

1. 在vite.config.js中定义占位符：

   export default {
     define: {
       'import.meta.env.APP_API_KEY': JSON.stringify('__API_KEY_PLACEHOLDER__')
     }
   }
   

2. 启动脚本中替换打包后JS文件里的占位符：

   sed -i "s/__API_KEY_PLACEHOLDER__/$APP_API_KEY/g" /usr/share/nginx/html/assets/*.js
   

常见误区 #

• 不要试图让前端直接读取容器的process.env：前端代码运行在浏览器中，无法直接访问容器的环境变量；
• 修改envPrefix只能解决构建时的前缀问题，无法解决构建后动态传参的问题——比如在vite.config.js中设置envPrefix: 'APP_'，只能让APP_API_KEY在构建时被注入，构建后依然无法动态修改。

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