Azure App Service部署Vue3+Vite应用环境变量失效问题求助

核心原因 #

Vite在构建阶段会注入带VITE_前缀的环境变量，而Azure App Service的应用设置是在运行时生效的。如果你的部署方式是直接上传预构建的静态文件，运行时的环境变量无法被已构建的Vite应用读取——因为构建时这些变量已经被硬编码进产物了。

解决步骤 #

1. 匹配部署方式配置环境变量 #

若上传预构建的dist文件夹：

需要在构建时注入Azure的环境变量，而非依赖运行时的App Settings。在Azure的「部署中心」或「配置-常规设置-启动命令」中设置构建命令：

VITE_API_URL=$API_URL npm run build && npm run preview -- --port $PORT

这里API_URL是你在Azure App Settings里配置的变量，VITE_API_URL是Vite能识别的前缀变量，替换成你实际需要的变量名即可。

若部署Git仓库让Azure自动构建：

直接在Azure App Settings中添加带VITE_前缀的变量（比如VITE_API_URL），Azure会在构建阶段自动将这些变量注入环境，Vite就能通过import.meta.env.VITE_API_URL正常读取。

2. 规范环境变量访问方式 #

• 始终用import.meta.env.VITE_XXX，不要改用process.env——Vite原生不支持后者，额外配置反而容易出问题。
• 放弃VUE_APP_前缀，这是Vue CLI的规则，Vite只认VITE_开头的变量。

3. 排查Linux实例的启动配置 #

• 确认启动命令正确，用vite preview时必须指定Azure提供的$PORT变量：

  npm run preview -- --port $PORT
  

• 查看Azure的「日志流」，检查构建或启动阶段的报错，确认环境变量是否被正确注入。

4. 解决Windows实例的404问题 #

Windows实例的404是因为SPA路由需要重写规则，所有请求都指向index.html。在项目根目录创建web.config文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

把web.config提交到Git，部署到Windows实例后就能解决路由404问题。

验证方式 #

部署完成后，在浏览器控制台执行console.log(import.meta.env)，查看是否能看到正确的VITE_前缀变量值。如果还是为空，检查Azure的构建日志，确认构建命令中是否正确传入了环境变量。

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