Vue 2.6+Quasar应用：Azure Pipeline环境变量传递与只读文件系统适配问题

针对你遇到的问题，Quasar框架本身提供了构建时注入环境变量的机制，完全不需要写入文件，适配只读文件系统需求，具体步骤如下：

1. 配置Quasar构建时的环境变量 #

修改项目根目录的quasar.config.js，在build选项下添加env配置，直接读取构建环境中的系统变量（Azure Pipelines会自动将配置的变量注入到构建环境的process.env中）：

// quasar.config.js
module.exports = function (ctx) {
  return {
    // ... 其他原有配置
    build: {
      // ... 其他build配置
      env: {
        // 按需添加需要的变量，优先取环境变量，没有则用默认值
        API_BASE_URL: process.env.API_BASE_URL || 'https://default-api.example.com',
        APP_FEATURE_FLAG: process.env.APP_FEATURE_FLAG || 'false'
      }
    }
  }
}

2. 在Vue组件/代码中使用变量 #

配置完成后，在Vue组件或任意前端代码中直接通过process.env.xxx访问即可，Quasar会在构建时将这些变量替换为实际的环境值，不需要额外处理：

<template>
  <div>当前API地址：{{ apiUrl }}</div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: process.env.API_BASE_URL
    }
  }
}
</script>

3. Azure Pipelines构建时注入变量 #

在Azure Pipelines的构建脚本中，直接将需要的变量传递给构建命令即可。比如在yaml配置中：

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '14.x' # 匹配你的项目Node版本
  displayName: 'Install Node.js'

- script: npm install
  displayName: 'Install dependencies'

- script: npm run build
  displayName: 'Build Quasar app'
  env:
    # 这里映射Azure Pipelines中定义的变量到构建环境变量
    API_BASE_URL: $(ApiBaseUrl)
    APP_FEATURE_FLAG: $(AppFeatureFlag)

为什么之前的方案无效？ #

• 直接在quasar.config.js中写死变量值，没有读取process.env，所以Azure的变量无法覆盖；
• Quasar框架本身已经集成了环境变量注入逻辑，无需额外使用dotenv，强行引入会和框架逻辑冲突；
• /config/prod.env.js这类文件是Vue CLI的配置方式，Quasar不采用该结构，所以无法读取到变量。

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