需求：

最近在入坑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.csdn.net/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，问题成功解决
 
  
  
 
 Logo 
Vue
 
前往低代码交流专区
 
 
  
更多推荐
  
 
vue 表单验证
 
1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^
 
avatar Vue
 
cover
 
echarts堆叠柱状图
 
 
avatar Vue
 
 
Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"
 
这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...
 
avatar Vue