ランタイムオンリービルドの使い方 (runtime)

ランタイムオンリービルドが使えるケース

  • 実行時にテンプレートのコンパイルが必要ない場合
  • テンプレートの代わりに render 関数を提供している
  • 単一コンポーネントファイルを production ビルドした場合

完全ビルドが必要なケース(ランタイムオンリービルドが使えないケース)

  • 実行時にテンプレートのコンパイルをする必要がある場合
  • template オプションに文字列のテンプレート (HTML) を渡している
  • HTML ドキュメント (DOM) をテンプレートとしてマウントする場合

参考:

ランタイム + コンパイラとランタイム限定の違い – インストール — Vue.js [公式]

Vue.js: Deploying to Production – Peter’s

vue-loader is not pre-compiling my SFC templates · Issue #1383 · vuejs/vue-loader – GitHub

Webpack の設定

Webpack で特別な指定をしない場合、ラインタイムオンリービルドが使われる。

import Vue from 'vue'

完全ビルドを使う設定

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  // ...
}

明示的にランタイムオンリービルドを指定する場合の設定

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.runtime.esm.js'
    }
  },
  // ...
}

development 環境では完全ビルドを使い、production 環境ではランタイムオンリービルドを使う場合の設定

let vue
if (process.env.NODE_ENV == 'development') {
  vue = 'vue/dist/vue.esm.js'
} else {
  vue = 'vue/dist/vue.runtime.esm.js'
}
module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': vue
    }
  },
  // ...
}

参考:

ランタイム + コンパイラとランタイム限定の違い – インストール — Vue.js [公式]

rails + vue.js で完全ビルドに変更する方法|teratail

webpack – Rails + webpacker + vue: “You are using the runtime-only build of Vue where the template compiler is not available.” – Stack Overflow

You are using the runtime-only build of Vue where the template compiler is not available – Stack Overflow

CSP

完全ビルドを使うためには、script-srcunsafe-eval が必要となる。ランタイムオンリービルドを使えば、unsafe-eval は必要ない。

参考:

CSP – problem with eval – Vue Forum

Ruby on Rails における CSP の設定

development 環境では HMR を利用する際に、テンプレートをコンパイルするために script-srcunsafe-eval が必要となる。

production 環境でランタイムオンリービルドを利用する場合の CSP の設定例

Rails.application.config.content_security_policy do |policy|
  if Rails.env.development?
    policy.script_src :self, :https, :unsafe_eval
  else
    policy.script_src :self, :https
  end
end

production 環境で完全ビルドを利用する場合、script-srcunsafe-eval が必要となる。

Rails.application.config.content_security_policy do |policy|
  policy.script_src :self, :https, :unsafe_eval
end

参考:

Vue – rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails – GitHub

Chrome 拡張機能を作成する

参考:

What I Learned About VueJS From Building A Chrome Extension – Vue.js Developers

Vuejs browser extension without using ‘unsafe-eval’ in CSP – Stack Overflow

Tagged:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です