如何在Vue应用中使用Azure静态Web应用环境变量及部署最佳方案

1. 是否可以在Vue应用中使用Azure静态Web应用的环境变量？ #

完全可以。Azure静态Web应用支持构建时变量和运行时变量两种类型，Vue应用都能适配使用。

2. 部署Vue应用并使用环境变量的最佳方案 #

结合你提供的Azure静态Web应用配置界面，具体步骤如下：

步骤1：在Azure静态Web应用中配置环境变量 #

• 登录Azure门户，进入你的静态Web应用资源，点击左侧菜单的「配置」>「应用设置」
• 根据需求添加变量：
  • 若为构建时使用的变量（如API地址、应用版本），建议前缀用VUE_APP_（符合Vue默认的环境变量识别规则），例如键填VUE_APP_API_URL，值填你的API端点地址
  • 若为运行时使用的变量，无需前缀，直接设置键值对即可，Azure会自动在客户端注入这些变量

步骤2：在Vue应用中读取环境变量 #

• 构建时变量：直接在Vue组件或代码中通过process.env.VUE_APP_XXX读取，示例：

  // 在Vue组件中
  export default {
    mounted() {
      console.log('API地址:', process.env.VUE_APP_API_URL);
    }
  }
  

• 运行时变量：Azure静态Web应用会自动生成env.js并注入到页面中，通过window.env.XXX直接读取，示例：

  // 在Vue组件中
  export default {
    mounted() {
      console.log('运行时变量:', window.env.YOUR_VAR_NAME);
    }
  }
  

步骤3：部署Vue应用到Azure静态Web应用 #

• 推荐自动部署（GitHub Actions/Azure DevOps）：
  1. 将Vue代码托管到GitHub或Azure Repos
  2. 创建Azure静态Web应用时关联代码仓库，开启自动部署
  3. 部署流程会自动读取配置的构建时环境变量，注入到Vue构建过程，生成包含变量的静态文件
• 手动部署：
  1. 本地执行npm run build打包Vue应用（确保构建时变量已正确注入）
  2. 将dist文件夹内容上传到Azure静态Web应用的部署中心

注意事项 #

• Vue默认仅识别前缀为VUE_APP_的环境变量，构建时变量必须加该前缀才能被正确读取
• 若需区分开发/生产等不同环境，可在Azure静态Web应用的「环境」选项中为各环境配置独立的应用设置

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