importmap-railsでvue.jsの開発用ビルドと本番用ビルドの切り替えを行う

vue.js (vue.esm-browser.js) には、開発用ビルドと、本番用ビルドが用意されています。
Railsの環境に合わせて、vue.jsの環境を切り替える方法を簡単にまとめたいと思います。

vue.jsのビルドについては公式サイトをご確認下さい。

開発用ビルドと本番用ビルドの切り替え

config/importmap.rb 内で、Rails.envで環境を判定して、pinの切り替えを行います。

CDNを利用する場合

importmap.rb

if Rails.env.development?
  pin "vue", to: "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
else
  pin "vue", to: "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js"
end

※ 実際に利用される際は、バージョンを明示的に指定して頂く方が安全です。例)vue@3.2.40

ダウンロードしたファイルを利用する場合

各環境のファイルをダウンロードします。

開発用

https://unpkg.com/vue@3/dist/vue.esm-browser.js

本番用

https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js

ダウンロードした各ファイルを vendor/javascript フォルダに保存します。

「CDNを利用する場合の設定」の importmap.rb 設定から「to:」をファイル指定に変更して完了となります。

importmap.rb

if Rails.env.development?
  pin "vue", to: "vue.esm-browser.js"
else
  pin "vue", to: "vue.esm-browser.prod.js"
end