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

在做vue-cli3.0项目时，自己想写个全局loading，挂载在全局，不用在每个页面中引用。但是写好的时候，发现项目报错 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-cli的时候，会提示你安装的版本，截图如下：

微信图片_20190630155801.png

这时系统会提示有两种版本： Runtime Only 版本和 Runtime+Compiler 版本。

1.Runtime Only
在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript，因为是在编译阶段做的，所以它只包含运行时的 Vue.js 代码，因此代码体积也会更轻量。在将 .vue 文件编译成 JavaScript的编译过程中会将组件中的template模板编译为render函数，所以我们得到的是render函数的版本。所以运行的时候是不带编译的，编译是在离线的时候做的。这个版本较Runtime+Compiler轻量6kb左右。在main.js中：

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

2.Runtime+Compiler

我们如果没有对代码做预编译，但又使用了 Vue 的 template 属性并传入一个字符串，则需要在客户端编译模板，在main.js中：

new Vue({
     el: '#app',
     router,
     template: '<App/>',
     components: { App }
})

如果写 template 属性，则需要编译成 render 函数，那么这个编译过程会发生运行时，所以需要带有编译器的版本，即Runtime+Compiler版本。但是这个编译过程对性能会有一定损耗，所以通常我们更推荐使用 Runtime-Only 的 Vue.js。

有时会遇到这样的错误：

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

解决方法

将main.js中的

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

改为：

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

并在vue.config.js中配置加入如下配置：

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

最后编辑于：2019.06.30 16:14:50