背景

開発時はローカル、本番ではGCSへコピーした画像を参照したい

やったこと

使うコンポーネントで毎回ローカルとGCSの参照を切り替えるのは面倒なので画像を扱うクラスを用意することにしました
Rails環境でRAILS_ENVにproduction,staging等が指定されGCSではバケット名が [RAILS_ENV]-assets というような名前になっている状態です
NODE_ENVはdevelopmentかproductionが指定されるのでそれを見て開発時のローカルパスを返すか、GCSのURLを返すかを判断します
画像はapp/javascript/images　以下に　image-a.jpg, image-b.jpgが置いてある前提です

config/webpack/environment.js

...略

environment.config.merge({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '..', '..', 'app/javascript')
    }
  }
})

module.exports = environment

image.js

'use strict'
import imageA from '@/images/image-a'
import imageB from '@/images/image-b'

const GCS_DOMAIN = 'storage.googleapis.com'
const BUCKET = `${process.env.RAILS_ENV}-assets`
const PROTOCOL = 'https'

class Image {
  static sources = {
    imageA: imageA,
    imageB: imageB
  }

  constructor () {
    this.host = ""
    if (process.env.NODE_ENV === 'production')
      this.host = `${PROTOCOL}://${BUCKET}.${GCS_DOMAIN}`
  }

  /**
   * 画像のパスを取得
   * @returns {String}
   */
  getSrc (key) {
    return `${this.host}${Image.sources[key]}`
  }
}

export default new Image

Image.vue

<template lang="pug">
img(:src="src")
</template>

<script>
import image from './image'

export default {
  data () {
    src: image.getSrc('imageA')
  }
}
</script>