【Vue】エラー解決備忘録：You are using the runtime-only build of Vue where the template compiler is not available...

webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。

現象

Vueの設定をしてビルドした所、下記のエラーが発生しました。
ビルド自体は正常に完了しました。

[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.

解決方法

resolve.aliasの設定を忘れていました。
webpack.config.jsのresolve.aliasにvueライブラリ用の設定を追加します。

jp.vuejs.org

// webpack.config.js

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

resolve.alias についておさらい

resolve.aliasというのは、import、もしくはrequireで指定するファイル（ライブラリ）名のエイリアスを作成するための設定です。

webpack.js.org

指定する事で、呼び出す時のファイルを決める事ができます。
指定がなければ、node_moduleを優先して探しに行きます。

例えば下記の宣言は、 node_module内にあるvueディレクトリを探しに行きます。

import Vue from "vue"

しかし、node_module内のvueディレクトリ配下にはライブラリ本体がありません。
そのため、特定のファイルをエイリアスで指定する必要がありました。

またvue$のように最後に$マークをつけると、完全一致した場合のみエイリアスが有効にするために指定しています。

A trailing $ can also be added to the given object's keys to signify an exact match:

Resolve | webpackより引用

import Vue from "vue"    // エイリアスが適用される
import Vue from "vue/hoge"    // エイリアスが適用されない