not可以动态注入Vite env变量。但是可能的是更改window object变量（在运行时分配）。

• • 警告!!!不要通过Window对象暴露任何敏感变量。使用前端应用程序源的任何人都可以看到它**
• • 步骤：**

1.创建你想要的env文件并将它们放在<rootDir>/public中，我们将它们命名为env.js和env-prod.js。
1.在你的env.js和env-prod.js里面你想用var关键字来分配你想要的变量。另外，你必须在你的源代码中引用这些值，比如window.MY_VAR，才能使用它们。
1.在<rootDir>/index.html中创建一个脚本标记，如下所示：
一米一米一。

• • 重要!!!**type="text/javascript"很重要，因为如果您指定module，Vite将在您的index.js文件中包含您的env.js源代码。

1. Vite配置（可选）：

plugins: [react(), tsConfigPath()],
  build: {
    emptyOutDir: true, // deletes the dist folder before building
  },
});

1. How to serve the env files on runtime。创建一个node服务器来服务前端应用程序。但是在服务env.js文件之前，根据我们的process.env.ENVIRONMENT，您现在可以选择服务哪个env.js。假设我的节点服务器文件存储在<rootDir>/server/server.js：

const express = require("express");
const path = require("path");

const app = express();

const env = process.env.ENVIRONMENT || "";

console.log("ENVIRONMENT:", env);

const envFile = path.resolve("public", env ? `env-${env}.js` : "env.js");

const indexFile = path.resolve("dist", "index.html");

app.use((req, res, next) => {
  const url = req.originalUrl;
  if (url.includes("env.js")) {
    console.log("sending", envFile);
    // instead of env.js we send our desired env file
    res.sendFile(envFile);
    return;
  }
  next();
});

app.use(express.static(path.resolve("dist")));
app.get("*", (req, res) => {
  res.sendFile(indexFile);
});

app.listen(8000);

1.在您的终端中运行node ./server/sever.js命令时为您的应用程序构建提供服务。
1.* * 最后：**
我的env.js包含var RUNTIME_VAR = 'test'
我的env-prod.js包含var RUNTIME_VAR = 'prod'
在我将process.env.ENVIRONMENT设置为prod之后，我得到了这个文件：

我的解决方案是，它应该与我的问题中的链接一起工作。如果use this方法有效，唯一需要考虑的是使用不同的变量名/前缀（例如“APP_...”），因此vite不会在构建时更改它们。我创建了一个配置文件，用于解析变量，例如，如果应用程序处于生产状态，则其使用新变量“APP_.."（从nginx/ docker注入）或使用“VITE_..."-变量（如果未定义“APP_..”）。

我想出了一个解决方案，并将其作为包发布到NPM注册中心。
使用此解决方案，您无需更改任何代码：

// src/index.js
console.log(`API base URL is: ${import.meta.env.API_BASE_URL}.`);

它将构建步骤分为两个构建步骤：
在生产过程中，它将被静态替换为占位符import.meta.env：

// dist/index.js
console.log(
  `API base URL is: ${"__import_meta_env_placeholder__".API_BASE_URL}.`
);

然后，您可以在任何位置运行软件包的CLI，以将占位符替换为环境变量：

// dist/index.js
console.log(
  `API base URL is: ${{ API_BASE_URL: "https://httpbin.org" }.API_BASE_URL}.`
);
// > API base URL is: https://httpbin.org.

以下是文档站点：https://iendeavor.github.io/import-meta-env/.
请随时提供任何反馈。

首先在项目根目录下创建. env文件，然后在. env中定义变量
例如：VITE_APP_any = 'any'
然后将以下行添加到vite.config.js：

export default defineConfig(({ command, mode }) => {

  const env = loadEnv(mode, process.cwd(), ""); //this line

  return { 
.
.
.

对于用法，可以使用以下行
import.meta.env.VITE_APP_any
或者
process.env.VITE_APP_any

这是停靠文件

FROM node:alpine3.14 AS buildJS
WORKDIR /var/www/html
COPY . .
RUN apk add --no-cache yarn \
    && yarn && yarn build

FROM nginx:stable-alpine
WORKDIR /var/www/html
COPY --from=buildJS /var/www/html/dist .
COPY ./docker/conf/nginx.conf /etc/nginx/conf.d/default.conf
COPY ./docker/conf/config.json /etc/nginx/templates/config.json.template

ENTRYPOINT []

CMD sleep 5 && mv /etc/nginx/conf.d/config.json config.json & /docker-entrypoint.sh nginx -g 'daemon off;'

我在第一阶段构建项目，没有任何env，在第二阶段，我复制文件，然后基于运行时通过nginx的*envstub*特性传递的env创建config.json文件。
然后我从项目中调用了config.json文件，并从那里加载了envs，但要小心，您不能导入它，因为导入将在构建时解析，而必须使用fetch或axios或任何等效方法获取它

您可以设置YAML格式的变量，并根据您的要求相应地更新它们。
下面是我们用作模板的示例YAML格式：

#Set variables once
variables:
  configuration: debug
  platform: x64

steps:

#Use them once
- task: MSBuild@1
  inputs:
    solution: solution1.sln
    configuration: $(configuration) # Use the variable
    platform: $(platform)

#Use them again
- task: MSBuild@1
  inputs:
    solution: solution2.sln
    configuration: $(configuration) # Use the variable
    platform: $(platform)

查看此SO，了解Azure Web应用中托管的环境变量的更多见解