Vue中的Runtime Only和Runtime Compiler

最新推荐文章于 2024-02-21 22:44:08 发布

闰土月下追猹

最新推荐文章于 2024-02-21 22:44:08 发布

阅读量431

点赞数

分类专栏：前端文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_36237810/article/details/110184325

版权

在Vue项目开发中遇到一个富文本编辑器插件报错，原因是插件与项目使用的Vue编译模式不一致。Runtime Only版本的Vue.js需要借助webpack的vue-loader预先编译.vue文件，生成render函数。若需客户端编译模板，则需完整版Vue，包含Runtime Compiler。为了减小程序体积，通常推荐使用Runtime Only。若想使用特定插件，可能需要调整项目的编译模式。

摘要由CSDN通过智能技术生成

从一次报错说起

Vue项目开发中安装使用了一个富文本编辑器插件vue-html5-editor，页面安装使用之后出现如下错误：

错误中提示，该插件使用的编译模式和项目中默认使用的编译模式不一样，即插件使用的编译模式是Runtime Compiler，而项目默认使用的是Runtime Only，因此就出现了上述问题。

Runtime Only

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

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版,当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。
因为运