如何在生产环境的Vite Svelte项目中加载环境变量？

你遇到的核心问题是对Vite环境变量的静态替换机制理解不清：Vite会在npm run build的构建阶段，把代码里的import.meta.env.VITE_*静态替换成构建时的变量值，构建完成后生成的是纯静态文件，此时再修改服务器环境变量或复制.env文件到dist目录，浏览器端代码根本读不到这些变量——因为静态文件已经固化，且浏览器无法直接访问服务器的环境变量或.env文件。

根据你的需求（Cloud Run部署，需要在生产环境获取环境变量），提供两种可行方案：

方案一：构建时注入环境变量（适合变量固定场景） #

直接在Vite构建阶段传入Cloud Run的环境变量，让Vite完成静态替换：

1. 删除Dockerfile中COPY .env.production /app/dist/.env这行（没用，浏览器读不到）。
2. 修改Dockerfile的build阶段，在构建前注入环境变量：

   FROM node:16-alpine as build
   
   WORKDIR /app
   
   COPY package.json .
   COPY package-lock.json .
   RUN npm install
   COPY . .
   # 从Cloud Run构建参数或环境变量中注入Vite所需变量
   ENV VITE_BASE_URL=$VITE_BASE_URL
   ENV VITE_API_URL=$VITE_API_URL
   RUN npm run run-build
   
   FROM nginx:1.19
   COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
   COPY --from=build /app/dist /usr/share/nginx/html
   

3. 在Cloud Run控制台配置环境变量时，勾选「将环境变量设置为构建变量」，这样构建阶段Vite就能拿到这些变量，完成静态替换。

方案二：运行时注入环境变量（适合动态修改场景） #

如果需要构建后不重新编译就能修改变量，可以通过Nginx启动时替换静态文件中的占位符实现：

1. 在Svelte项目的index.html中添加全局变量占位脚本：

   <script>
     window.env = {
       VITE_BASE_URL: '%VITE_BASE_URL%',
       VITE_API_URL: '%VITE_API_URL%'
     };
   </script>
   

2. 修改Dockerfile，添加启动脚本替换占位符：

   FROM node:16-alpine as build
   
   WORKDIR /app
   
   COPY package.json .
   COPY package-lock.json .
   RUN npm install
   COPY . .
   RUN npm run run-build
   
   FROM nginx:1.19
   COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
   COPY --from=build /app/dist /usr/share/nginx/html
   # 添加替换环境变量的启动脚本
   COPY ./replace-env.sh /docker-entrypoint.d/
   RUN chmod +x /docker-entrypoint.d/replace-env.sh
   

3. 创建replace-env.sh脚本（和Dockerfile同目录）：

   #!/bin/sh
   sed -i "s/%VITE_BASE_URL%/$VITE_BASE_URL/g" /usr/share/nginx/html/index.html
   sed -i "s/%VITE_API_URL%/$VITE_API_URL/g" /usr/share/nginx/html/index.html
   

4. 在Svelte代码中，改为读取全局变量：

   const baseUrl = window.env.VITE_BASE_URL;
   const apiUrl = window.env.VITE_API_URL;
   

5. 在Cloud Run控制台配置环境变量，Nginx启动时会自动替换index.html中的占位符，浏览器加载后即可获取正确值。

• 所有需要Vite处理的环境变量必须以VITE_开头，否则不会被静态替换。
• 方案一适合变量长期固定的场景，构建后无需修改；方案二适合需要复用镜像、动态调整变量的场景。

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