ランタイムオンリービルドの使い方 (runtime) [Vue.js]

ランタイムオンリービルドの使い方 (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

el でマウントポイントを指定する

render 関数または template オプションも存在しない場合、マウントしている DOM 要素にある HTML がテンプレートとして抽出されます。この場合、Vue のランタイムとコンパイラが同包された完全ビルドを使用する必要があります。

参考：

el | Vue.js [公式]

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-src に unsafe-eval が必要となる。ランタイムオンリービルドを使えば、unsafe-eval は必要ない。

参考：

Vue.js と CSP (Content Security Policy) – Qiita

CSP – problem with eval | Vue Forum

Content Security Policy error with Vue JS, Webpack and JSP | Vue Forum

Vue inline template and CSP – Stack Overflow

Ruby on Rails における CSP の設定

development 環境では HMR を利用する際に、テンプレートをコンパイルするために script-src に unsafe-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-src に unsafe-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

記事をシェアする：