如何将source maps上传至Sentry且不部署到生产网站与应用中

可行实现方案 #

你可以通过多份vue.config.js配置文件实现需求，完全适配AppFlow无法设置环境变量的限制，具体操作步骤如下：

1. 拆分多份构建配置文件 #

根目录保留3份配置文件，各司其职：

• 默认vue.config.js：给Ionic AppFlow构建iOS/Android包使用，默认关闭sourcemap生成，不加载Sentry上传插件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 你的原有通用配置
  productionSourceMap: false,
  configureWebpack: {
    plugins: [] // 不引入Sentry webpack插件
  }
})

• vue.config.web.deploy.js：给GitHub Actions构建部署到Firebase的Web包使用，同样关闭sourcemap，避免源码泄露

const baseConfig = require('./vue.config')
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  ...baseConfig,
  productionSourceMap: false,
  // 可添加Web端专属配置
})

• vue.config.web.sentry.js：给GitHub Actions构建并上传sourcemap到Sentry使用，仅本次构建临时生成sourcemap，上传后自动删除

const baseConfig = require('./vue.config')
const { defineConfig } = require('@vue/cli-service')
const SentryWebpackPlugin = require('@sentry/webpack-plugin')

module.exports = defineConfig({
  ...baseConfig,
  productionSourceMap: true,
  configureWebpack: {
    plugins: [
      new SentryWebpackPlugin({
        // 你的原有Sentry配置：authToken、org、project、release等
        include: './dist',
        ignore: ['node_modules'],
        deleteAfterCompile: true // 上传完成自动删除本地sourcemap，避免误部署
      })
    ]
  }
})

2. 调整GitHub Actions工作流 #

你可以在同一个Action文件里配置两个并行/串行的Job，也可以分成两个独立的Action，构建时指定对应的配置文件即可：

• 负责部署到Firebase的Job，构建命令修改为：
  vue-cli-service build --config vue.config.web.deploy.js
  构建完成后将dist目录部署到Firebase Hosting即可，该版本无任何sourcemap，不会泄露源码
• 负责上传sourcemap到Sentry的Job，构建命令修改为：
  vue-cli-service build --config vue.config.web.sentry.js
  注意：两个Web构建任务需要使用相同的release版本号（比如用Git commit hash作为版本号），保证Sentry收到报错时能匹配到对应版本的sourcemap

3. AppFlow端无需修改 #

Ionic AppFlow构建时默认会读取根目录的vue.config.js，我们已经在该配置中关闭了sourcemap生成、移除了Sentry上传插件，所以iOS/Android构建过程中不会生成、上传sourcemap，完全符合你的要求，不需要修改AppFlow的任何配置。

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