reactjs - 我如何在 azure 静态 Web 应用程序的生产中访问我的 React VITE ENV 变量？

Question

在本地，我使用 .env 文件并执行以下操作:

const value = import.meta.env.VITE_VALUETOGET
console.log("value", value )

当我进入生产环境时，我使用 azure 门户配置应用程序设置并添加了带有值的 VITE_VALUETOGET，这不起作用，因为如果我尝试记录它，我会得到未定义的结果。

我还尝试使用管道来部署应用程序，并在部署之前从 azure Vault 导出值，但似乎没有任何效果，process.env 也没有。

我也尝试过 vite.config.js:

export default defineConfig({
  mode: 'production',
  plugins: [
    react(),

    // Add the replace plugin to inject environment variables
    replace({
      'import.meta.env.VITE_VALUETOGET': JSON.stringify(process.env.VITE_VALUETOGET)
    }),
  ],
});

Answer 1

Access env variables from Azure Static Web App · Discussion Variables.VITE ENV variables in the production of an Azure static web app.Used this reference for Building for Production

   const value = import.meta.env.VITE_VALUETOGET  
     console.log('process.env', process.env);

• 引用此环境变量和 Modes

   {  
     "NODE_ENV": "production",  
     "PUBLIC_URL": "",  
     "FAST_REFRESH": true  
   }

• 在Vite中使用环境变量。启动命令包含npxserve -l 8080。

• 有关其他详细信息，请参阅如何加载 environment使用 Vite 来自 .env 文件的变量.