2017-5-17
[Vue.js]browserifyをVue.jsで利用する時の注意
Vue.js を特に何も考えず browserify でビルドすると以下のエラーが発生する時がある。
[Vue warn]: You are using the runtime-only build of Vue
where the template compiler is not available.
Either pre-compile the templates into render functions,
or use the compiler-included build.
解決法
package.json に以下の記述を追加する。
"browser": {
"vue": "vue/dist/vue.common.js"
}
詳細
公式サイトに以下のように記述がある。
もしその場でテンプレートをコンパイルする必要がある (例えば、 template オプションに文字列を渡す、もしくは DOM 内の HTML をテンプレートとして利用し要素にマウントする) 場合は、コンパイラすなわち完全ビルドが必要です。
vue-loader や vueify を利用する場合、 *.vue ファイルに中のテンプレートはビルド時に JavaScript に事前コンパイルされます。最終成果物の中にコンパイラは本当に必要なく、したがってランタイム限定ビルドを利用することが出来ます。
vue.js にはテンプレートのコンパイラを含む物と含まないものが存在し、npm 経由でインストールした vue.js はデフォルトでコンパイラを含まないランタイム限定ビルドを使用してしまう。vue-loader や vueify を使っている場合は事前にテンプレートがコンパイルされるため問題ないが、そうでなければ明示的にコンパイラを含む完全版のビルドを使うよう指定する必要がある。
前述の通り browserify を使用する場合は、
"browser": {
"vue": "vue/dist/vue.common.js"
}
を package.json に追記する必要があるという話。