如何在Vue 3项目运行时访问Google Cloud Run环境变量？

核心原因 #

Vue 3默认基于Vite构建，仅VITE_前缀的环境变量会被自动注入客户端代码；另外，Cloud Build通过--set-env-vars设置的变量如果是针对运行时（如Cloud Run），不会自动传递到Vite的构建流程中。

解决方案 #

方案1：遵循Vite命名规则（推荐） #

1. 修改Cloud Build的环境变量命名，添加VITE_前缀：

   "--set-env-vars=VITE_TEST=tested"
   

2. 在Vue代码中直接读取：

   console.log(import.meta.env.VITE_TEST); // 输出"tested"
   

方案2：自定义Vite配置注入非前缀变量 #

若必须保留TEST变量名，需手动配置Vite注入：

1. 在项目根目录的vite.config.js中添加配置：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig({
     plugins: [vue()],
     define: {
       // 将构建时的process.env.TEST注入客户端的import.meta.env.TEST
       'import.meta.env.TEST': JSON.stringify(process.env.TEST)
     }
   })
   

2. 确保Cloud Build的构建步骤也传递该变量（Vite构建时需要读取）：

   # Cloud Build配置片段示例
   steps:
     - name: 'node:18'
       args: ['npm', 'install']
     - name: 'node:18'
       args: ['npm', 'run', 'build']
       env:
         - 'TEST=tested'
   

3. Vue代码中即可正常读取：

   console.log(import.meta.env.TEST);
   

方案3：运行时注入动态变量 #

如果变量需要在部署后动态调整（而非构建时固定），需通过运行时注入：

1. 在public/index.html中添加占位脚本：

   <script>
     window.appEnv = {
       TEST: '__TEST_ENV__'
     }
   </script>
   

2. Cloud Build部署时替换占位符为实际值：

   sed -i 's/__TEST_ENV__/'$TEST'/g' dist/index.html
   

3. Vue代码中通过全局对象读取：

   console.log(window.appEnv.TEST);
   

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