vue2.x源码解析准备--Runtime Only 和 Runtime+Compiler

最新推荐文章于 2025-06-03 17:53:50 发布
最新推荐文章于 2025-06-03 17:53:50 发布
阅读量1.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37339364/article/details/82931180
本文深入探讨Vue2.x中RuntimeOnly与Runtime+Compiler的区别，RuntimeOnly更轻量但不支持jsx编译，需手动配置webpack；而Runtime+Compiler则无需手写render函数，更适合日常开发。

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

vue2.x源码解析准备–Runtime Only 和 Runtime+Compiler

在这里插入图片描述

1.1 Runtime Only

Runtime Only相比Runtime+Compiler更加轻量，但是缺点是不能够编译jsx，在vue源码中，无论是render函数，还是template最终都是编译成render函数进行渲染的，所以，使用Runtime Only有时需要自己手动配置webpack对模板语法进行编译。

1.2 Runtime+Compiler

常用的就是Runtime+Compiler，不需要自己手写render。

runtime-compiler和runtime-only的区别
轻风细雨_林木木
04-06 899
Vue的编译渲染过程 template --> ast --> render函数 --> VDom --> 真实DOM 先将template解析(parse)成抽象语法树(ast) 将ast编译(compiler)成render函数 将render函数渲染(render)成虚拟DOM 最后将虚拟DOM渲染成真实DOM runtime-compiler的步骤 template --> ast --> render函数 --> VDom --> 真实DOM
了解vue里的Runtime Only和Runtime+Compiler
weixin_30907935的博客
03-17 238
转自：了解vue里的Runtime Only和Runtime+Compiler 扩展文章：Vue 2.0如何仅使用Runtime-only Build构建项目？ 可以看到有两种版本： Runtime Only 版本 和 Runtime+Compiler 版本。 1.Runtime Only 我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 we...
关于不同版本的Vue
weixin_63758265的博客
06-03 115
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数收到的createElement函数去指定具体内容。（2）.vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；（1）.vue.js是完整版的Vue,包含：核心功能+模板解析器。
runtime-compiler和runtime-only
m0_54177068的博客
03-15 1144
首先看一下，这两种模式写法上，只有在main.js中不一样 runtime-compiler //其中App.vue模块中为组件内容 import Vue from 'vue' import App from './App' new Vue({ el:'#app', template:'<App/>', components:{App} }) runtime-only import Vue from 'vue' import App from './App'
vue runtime-only 和 runtime+compiler 的区别
Bigfishseasugar
06-24 508
在用 vue-cli2 （vue init webpack project）创建vue项目的时候，终端会询问你是用 runtime-only 和 runtime+compiler 中哪一种方式搭建。那么这两种方式到底有什么区别呢？我们来简单看一下。 它们代码方面的区别主要在于，src目录下的 main.js 文件的不同。 下图对两种方式搭建的项目中 main.js 文件代码进行比较： 可以看到 runtime-compiler 是比较基本的一种写法，步骤也很清晰：在vue组件里面注册一个名为A.
vue2.x源码解析准备--对源码进行debugger
小毛驴的博客
07-01 1515
1.debugger源代码 我们学习vue源码采用的是Runtime+Compiler的版本 当我们vue-cli创建完成后 build/webpack.base.conf.js中 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', ...
Vue教程(四十)Runtime + Compiler和Runtime-only的区别
yuan_xw的专栏
08-14 1539
Vue教程(四十)Runtime + Compiler和Runtime-only的区别 在使用vue-cli脚手架构建项目时，会遇到一个选项Vue build(vue构建)，有两个选项，Runtime + Compiler和Runtime-only Runtime + Compiler Runtime + Compiler: recommended for most users 运行时+编译器:推荐给大多数用户 Runtime-only Runtime-only: about 6KB lighter m
前端小白入门VueCLI之runtime-compiler和runtime-only区别
weixin_43916611的博客
12-27 900
文章目录前言一、不同之处二、开始分析理解render函数总结 前言 今天学到了runtime-compiler和runtime-only的区别，我们一起来走一遍学习的这个流程~ 一、不同之处 在我们使用脚手架创建项目的时候 命令行提示我们是选择 1.runtime-compiler 2.runrime-only 从这里我们一起分析为什么会出现这个选择 我们分别按照上下的选择创建两个项目： 我们发现了它们不同的地方在于main.js runtime-compiler的main.js runtime-o
【vue】 runtime-compiler和runtime-only的区别
鸭绒的博客
08-10 841
我们在利用脚手架创建项目时，在一个环节中会让我们选择runtime-compiler或runtime-only，这两者到底有什么区别呢？ 下面我们来创建两个项目，分别选中runtime-compiler和runtime-only:
Runtime + Compiler和Runtime-only
<WRM>的博客
07-17 246
两者的区别就在于main.js里面 Vue个运行过程如下： 先将template解析成抽象语法树（ast），然后再编译成render函数，通过render函数将之前的翻译成虚拟DOM，最后渲染为真实DOM Runtime + Compiler转换过程： tenplate -> ast -> render -> virtual DOM ->UI Runtime-only则跳过了前两步： render -> virtual DOM ->UI 综上，Runtime-onl.
Vue中：runtime+compiler和runtime+compiler的区别：
weixin_50701798的博客
04-04 252
Vue中：runtime+compiler和runtime+compiler的区别： 如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler 如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only
对Vue中 runtime-compiler 和 runtime-only 两种模式的理解
热门推荐
Jackie Huang
02-17 1万+
ps: 如果有任何问题可以评论留言，我看到后会及时解答，评论或关注，您的鼓励是我分享的最大动力 转载请注明出处： https://blog.csdn.net/qq_40938301/article/details/104342113 一、问题 在使用vue-cli脚手架构建项目时，会遇到一个构建选项 Vue build，有两个选项，Runtime + Compiler和Runti...
Runtime + Compiler与Runtime-only不同
weixin_57399180的博客
05-27 176
通过VueCLI创建vue项目的时候，会让选择使用Runtime + Compiler还是Runtime-only，那这两个之间到底有什么区别呢？ xi
Runtime-Compiler和Runtime-Only的区别
weixin_44760923的博客
12-18 786
我们使用 vue init 命令创建脚手架的时候，会有如下选择 Runtime + Compiler Runtime-Only 那么它们究竟有什么区别呢，今天我们就来探讨一下 首先，我们分别通过这两种方式，创建Vue脚手架。我们来看一下两者的 main.js 有什么不一样 区别很明显，在 Vue 实例中，runtime-compiler 创建的项目中的参数是 compoennts 和 te...
vue之Runtime+Compiler和Runtime+Only区别
atu1111的博客
09-22 462
  1).vue这选择Runtime+Compiler或Runtime+Only版本生成的项目，public 下面都有的 index.html 模板文件 <div id="app"></div>   html里面的div元素id为app可以不用在里面写内容，因为在main.js里的template里面的内容会对el绑定的元素进行替换。   这是Runtime+Compiler版本项目下main.js内容 new Vue({ el: '#app', components:
runtime compiler和runtime only
SSLJY_YCFH的博客
11-15 270
1 runtime compiler: template —经过parse渲染—>ast（abstract syntax tree 抽象语法树）—经过编译—>render函数—>翻译成virtual dom 虚拟dom树—>（真实dom）渲染UI界面。 如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HT...
Vue packages version mismatch: - vue@2.6.14 (D:\Git\irobotpcclient\node_modules\vue\dist\vue.runtime.common.js) - vue-template-compiler@2.7.16 (D:\Git\irobotpcclient\node_modules\vue-template-compiler\package.json) This may cause things to work incorrectly. Make sure to use the same version for both. If you are using vue-loader@>=10.0, simply update vue-template-compiler. If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
最新发布
06-14
<think>我们有两个引用：[^1]、[^2]、[^3]都提到了Vue和vue-template-compiler版本不一致的问题。根据用户当前问题：vue@2.6.14和vue-template-compiler@2.7.16不匹配。解决方案的核心：确保vue和vue-template-compiler的版本严格一致。步骤：1.检查当前安装的版本：-vue:2.6.14-vue-template-compiler:2.7.162.问题：这两个版本不一致，需要将它们调整为相同的版本。3.调整方法：-方案1：将vue升级到2.7.16（因为vue-template-compiler是2.7.16，所以将vue也升级到相同版本）-方案2：将vue-template-compiler降级到2.6.14（与vue版本保持一致）4.注意：根据引用[3]，Vue2.0的最新版本是2.7.16（已废弃2.6.x？），但实际上2.6.14也是Vue2的一个版本。不过，官方推荐使用相同版本，且2.7是Vue2的最终版本。5.建议：升级到Vue2.7.16，因为2.7版本包含了一些改进和长期支持。但需要注意，升级可能会引入一些破坏性变更，需要测试。6.具体操作：-升级vue到2.7.16（同时升级vue-template-compiler到2.7.16）：```bashnpminstallvue@2.7.16vue-template-compiler@2.7.16```或使用yarn：```bashyarnaddvue@2.7.16vue-template-compiler@2.7.16```-或者，如果不想升级vue，则降级vue-template-compiler到2.6.14：```bashnpminstallvue-template-compiler@2.6.14```或```bashyarnaddvue-template-compiler@2.6.14```7.验证：运行项目，检查是否还有版本不匹配的警告。8.注意：如果使用vue-loader，确保vue-loader的版本兼容。对于vue@2.6和2.7，vue-loader的版本要求是>=10.0，所以如果vue-loader版本过低，可能也需要更新。9.引用[2]提到：如果使用vue-loader@>=10.0，更新vue-template-compiler即可；如果使用vue-loader@<10.0，需要重新安装vue-loader以更新vue-template-compiler。因此，在调整版本后，如果问题仍然存在，请检查vue-loader的版本。总结步骤：1.确定要使用的Vue版本（2.6.14或2.7.16）。2.调整vue和vue-template-compiler到相同的版本。3.检查vue-loader版本，确保其兼容性（建议使用最新兼容版本）。根据用户当前安装的vue是2.6.14，如果用户不想升级Vue，则降级vue-template-compiler到2.6.14是最直接的方法。如果用户愿意升级，则升级到Vue2.7.16。相关问题：1.如何检查当前项目中安装的Vue和vue-template-compiler版本？2.升级Vue2.6到2.7需要注意哪些兼容性问题？3.除了版本匹配，还有哪些常见的Vue项目构建错误？</think>### Vue与vue-template-compiler版本不匹配解决方案 您遇到的问题是由于Vue核心库(`vue@2.6.14`)与模板编译器(`vue-template-compiler@2.7.16`)版本不一致导致的。Vue严格要求这两个包的版本必须**完全相同**，否则会导致编译错误[^2]。以下是具体解决步骤： #### 解决方案 1. **降级vue-template-compiler**（推荐） 将编译器版本降至与Vue核心库一致的2.6.14： ```bash npm uninstall vue-template-compiler npm install vue-template-compiler@2.6.14 ``` 或使用yarn： ```bash yarn remove vue-template-compiler yarn add vue-template-compiler@2.6.14 ``` 2. **升级Vue核心库** 若您希望使用最新版本，需同时升级Vue核心库： ```bash npm install vue@2.7.16 vue-template-compiler@2.7.16 ``` 注意：Vue 2.7是Vue 2的最终版本，包含部分Vue 3特性[^3]。 #### 验证步骤 安装后检查`package.json`确保版本严格匹配： ```json { "dependencies": { "vue": "2.6.14", "vue-template-compiler": "2.6.14" } } ``` 运行`npm ls vue-template-compiler`验证安装结果，应显示： ```bash vue-template-compiler@2.6.14 ``` #### 根本原因 该问题通常由以下情况引发： - 项目初始化时版本指定错误 - 使用`npm update`或`yarn upgrade`时未锁定版本 - 不同包管理器(npm/yarn)的缓存机制差异[^1] #### 预防措施 1. 始终同步安装两个包： ```bash npm install vue@x.x.x vue-template-compiler@x.x.x ``` 2. 在`package.json`中使用精确版本号（避免`^`或`~`） 3. 删除`node_modules`和`package-lock.json`后重新安装 > **重要提示**：Vue 2.6.x与2.7.x存在API差异，升级前需测试兼容性。若使用Vue CLI，需确保`@vue/cli-service`版本兼容[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值