【解决】You are using the runtime-only build of Vue where the template option is not available...

直奔主题

不想往下看的看这里。我是用的vue-cli4,项目报错是因为我对一个子路由的组件使用了非template模板，代码如下

const User = {
  template: '<div>User</div>'
}

然后将User置于路由对应的组件，当把User新建到一个新的.vue文件中，系统便不在报错。

背景

今天在学习vue-router的过程中，当我通过声明变量的形式创建组件时，并将变量赋值给路由的组件，当访问到该组件后，控制台会莫名的报一个错误，并且不展示该组件内容，错误信息如下：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.

解决过程

毫无撤退可言，当大家遇到这个问题的时候毫无疑问，肯定会把这一大串弄到百度上去搜索结果，当然，我也去了。得到的答案大概是Vue.js引用的不对，要通过覆写vue.config.js来改变路径，但是这是为什么呢？于是乎我去查了系统隐藏的webpack配置文件output.js时，发现vue-cli4有一个默认的配置，如下：

alias: {
    vue$: 'vue/dist/vue.runtime.esm.js',
},

这个时候就需要有一张官方的图来镇镇场子：

那真相大白了，就是没用对正确支持这种变量组件写法的vue.js!
通过编辑vue.config.js配置文件可以改变这一现状，有两种方式：
其一，通过上一篇博客说的,只不过这一次不要添加resolve了，那是针对根目录作为相对路径的。

chainWebpack: (config) => { // @/ 是 src/ 的别名,默认配置
      config.resolve.alias
        .set('@mixins', resolve('src/mixins'))
        .set('vue$', 'vue/dist/vue.esm.js')
}

其二，通过configureWebpack。可见，访问node_modules中的文件可以直接写路径,添加如下代码。

configureWebpack: {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' 
    }
  }
}

最后说点啥

你以为如果解决问题的路程如此简单，我会写这么一篇博客来水嘛？当然不！当我一开始查看output.js的时候，我直接把他看成了

alias: {
    vue$: 'vue/dist/vue.esm.js',
},

然后我想说，为什么配置对了还是会报错呢，然后就开展了一系列的寻错之旅，为了不误人子弟，我就不多写了，当然，这个问题是我写博客写到一半经一位道友点拨才看透的…不然也不会强忍着把这篇博客写完，希望大家可以从中学习点什么吧。。晚安。