记一次 Injection elForm not found错误原因分析

最新推荐文章于 2023-03-16 14:34:53 发布

剑锋不停歇

最新推荐文章于 2023-03-16 14:34:53 发布

阅读量7.8k

点赞数 1

分类专栏： vue elementui

本文链接：https://blog.youkuaiyun.com/qq187363147/article/details/106126478

版权

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

elementui

1 篇文章

订阅专栏

本文解决Vue项目中使用自定义表单设计工具form-generator遇到的问题，包括Runtime与Compiler模式的区别，如何正确引入ElementUI，以及配置vue.config.js以支持自定义组件的template配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

最近在入坑vue前后端分离方案，要实现在后端实现自定义表单设计（用的form-generator），然后提交自定义表单模板到数据库（以json和vue两种格式保存）。前端再给用户提供自定义表单（模板来自数据库）并提交数据。

实现：

demo模仿前端渲染自定义表单

关键点在于import Vue from 'vue/dist/vue.js'

一开始用的是import Vue from 'vue', 还是报错[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.

这里涉及Runtime 模式和Compiler模式的问题，去度娘找了半天参考了https://blog.youkuaiyun.com/sleepwalker_1992/article/details/82082400，然后改成了import Vue from 'vue/dist/vue.js' ，改成这个之后再把Custom.vue的

import Element from 'element-ui';

Vue.use(Element)

抽到全局main.js，果然还是报错

我以为是Custom.vue无法引用到elementui，再把

import Element from 'element-ui';

Vue.use(Element) 拷回Custom.vue，

找了几天百度，问了各种论坛，终于发现问题还是出现在运行模式，只要注册自定义组件里面出现template配置，就一定用的是编译Compiler模式。

Compiler模式附资料http://nferzhuang.com/vue%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90%E5%87%86%E5%A4%87-runtime-only%E5%92%8Cruntime-compiler/

最终修改vue.config.js（如果不存在则手动创建），修改为

runtimeCompiler:true，问题成功解决