You are using the runtime-only build of Vue where the template compiler is not available问题解决

文
章
目
录

• 问题分析
• 解决办法

最近在使用第三方库的Vue组件时，都正常import而且，全局注册了，但在使用组件时却一直出不来效果，看console报错类似如下提示：

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.
found in….

具体报错图如下：

问题分析

在项目配置的时候，默认 npm 包导出的是运行时构建，即 runtime 版本，不支持编译 template 模板。

vue 在初始化项目配置的时候，有两个运行环境配置的版本：Compiler 版本、Runtime 版本。
其主要区别在于：

1、Compiler 版本：
可以对 template 模板内容进行编译（包括字符串模板和可以绑定的 html 对象作为模板），例如：

new Vue({
  el: "#box",
  template: "<div>{{msg}}</div>",
  data: {
    msg: "hello"
  }
});

2、Runtime 版本：
使用 vue-loader 加载.vue 文件（组件文件）时，webpack 在打包过程中对模板进行了渲染。

解决办法

只需要在vue.config.js配置文件中新增如下runtimeCompiler配置即可

module.exports = {
  runtimeCompiler: true,
}

然后再去重启项目的发现就不会报这个错了，而且组件引用也正常了。