通过GitHub Action部署Vue.js至Azure Web App时环境变量未生效求助

问题核心原因 #

1. Vue 是前端框架，默认打包生成的是纯静态文件，你代码里的process.env.xxx变量会在npm run build 执行时被直接替换成对应的静态字符串，构建完成后无法再修改。
2. 你当前通过azure/appservice-settings设置的是 Azure Web App 的服务端运行时环境变量，仅服务端代码/SSR 应用可以读取，纯静态的前端代码无法直接读取这些值。
3. 你当前的工作流顺序错误：先设置 Azure 端配置，再执行 Vue 构建，构建环节根本没有读取到你配置的变量值，自然全是 undefined。

解决方案 #

方案一：构建阶段注入变量（最常用，适合不需要频繁改配置的场景）

这是最常规的处理方式，直接在构建环节把变量写入打包产物：

1. 注意变量前缀规则：
   • 用 Vue CLI 构建的项目，所有需要在前端代码中访问的变量必须以VUE_APP_开头，代码中通过process.env.VUE_APP_XXX读取
   • 用 Vite 构建的项目，所有需要在前端代码中访问的变量必须以VITE_开头，代码中通过import.meta.env.VITE_XXX读取
     你的secrets.APP_SETTINGS_DEV里存储的配置key需要符合上述前缀规则，或者在导出的时候统一加上前缀。
2. 修改你的工作流构建阶段的步骤，增加环境变量注入环节：

- uses: actions/checkout@v2

- name: Set up Node.js版本
  uses: actions/setup-node@v1
  with:
    node-version: '14.x'

# 新增步骤：把配置导出为构建环境可用的变量
- name: 注入构建用环境变量
  run: |
    echo '${{ secrets.APP_SETTINGS_DEV }}' | jq -r 'to_entries|map("\(.key)=\(.value|tostring)")|.[]' >> $GITHUB_ENV
  # 如果需要统一加前缀，可以改成下面的写法
  # echo '${{ secrets.APP_SETTINGS_DEV }}' | jq -r 'to_entries|map("VUE_APP_\(.key)=\(.value|tostring)")|.[]' >> $GITHUB_ENV

- name: 执行npm install与build命令
  run: |
    npm install
    npm run build

3. 如果你只是部署纯静态Vue应用，你工作流里一开始设置Azure应用配置的步骤可以删掉，纯静态场景下这些配置不会被前端代码读取到。

方案二：运行时动态加载配置（适合需要不重新构建就修改配置的场景）

如果你的场景需要经常修改配置，不想每次改配置都重新走流水线，可以用运行时加载的方案：

1. 在项目public目录下新建config.js，内容示例：

window.GLOBAL_CONFIG = {
  API_URL: "默认接口地址",
  OTHER_CONFIG: "其他默认配置"
}

2. 在项目public/index.html的<head>标签里引入这个文件：

<script src="<%= BASE_URL %>config.js"></script>

3. 代码中所有需要读环境变量的地方，都改成直接读window.GLOBAL_CONFIG.XXX，不需要再用process.env
4. 部署到Azure之后，你可以通过Azure的启动命令、自定义扩展来动态修改config.js里的配置值，修改后重启应用即可生效，不需要重新构建。

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