Vue.js を導入するとコンソールエラーになるとき


環境

  • vuejs v2.5.13
  • gulp v3.9.1

実行コード

app.js
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

コンソールエラー

Router [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"
  },

Ref.

https://router.vuejs.org/ja/essentials/getting-started.html
https://aloerina01.github.io/javascript/vue/2017/03/08/1.html