vue-router控制台报错You are using the runtime-only build of Vue where the template compiler...

使用vue-router报错

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

今天第一次用vue-router，按照官网的例子抄了一遍

首先在main.js中引入vue-router配置

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.config.productionTip = false

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
})

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

然后在App.vue中写入导航以及路由出口

<template>
  <div id="app">
    <p>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

结果写出来没用，后来查了下原因，使用vue-cli创建的项目需要在根目录下创建vue.config.js

写入内容

module.exports = {
  runtimeCompiler: true
}

重启项目，就OK了

解决方案出处: https://github.com/vuejs/vue-cli/issues/2754#issuecomment-493290698