Vue创建component组件引用后不显示问题

Vue创建component组件引用后不显示问题

问题描述

控制台警告
大致意思：您使用的是Vue的仅运行时版本，其中模板编译器不可用。将模板预编译为渲染函数，或者使用内置的编译器。
代码
显示

问题原因

runtime-compiler和runtime-only

在项目配置的时候，使用npm 包默认导出的是运行时构建，即 runtime-only 版本，不支持编译 template 模板。 vue在初始化项目配置的时候，有两个运行时版本：runtime-compiler版本、runtime-only版本。
runtime-compiler 版本： 可以对 template 模板内容进行编译。
runtime-only 版本： 使用 vue-loader 加载.vue 文件时，webpack 在打包过程中对模板进行了渲染。 加载更快。

解决方案

修改vue.config.js添加runtimeCompiler：true即可

module.exports = {
  //Solution For Issue: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.
  runtimeCompiler: true
}

更多知识点点击这里