vue中runtime-only和runtime-compiler的使用区别！！

最新推荐文章于 2023-07-04 15:52:31 发布
最新推荐文章于 2023-07-04 15:52:31 发布
阅读量331 收藏
点赞数
分类专栏： vue文章 文章标签： javascript vue.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46623655/article/details/116464631
版权
今天学习完了搭建脚手架2，对runtime-only和runtime-compiler的理解不是很熟练，本不想写这篇博客的，但觉得会有帮助，所以最后有了这篇博客。

在这里插入图片描述
左侧图片是使用runtime-compiler，右侧图片是使用runtime-only，这两者的区别在于能否解析template模板，前者能够解析，而后者不能解析。
runtime-compiler在遇到.vue文件时，就是当作vue使用，所以能够解析template。但是runtime-only在遇到.vue文件时，解析为.js文件，其中的tempalte会转化为render函数。具体步骤如下所示:
runtime-compiler工作过程是template->ast->render函数->vDOM->DOM->UI
runtime-only工作的过程是 render函数->vDOM->UI

在vscode加载项目时，推荐的是runtime-compiler，但是runtime-only的优点很多，比如更轻、编译速度更快，中间减少了不少步骤

在runtime-only中，template之所以能够转化为render函数，是因为我们在安装vue时，安装了vue-template-compiler

**"vue-template-compiler": "^2.5.2",**
前端新手小白上路，欢迎各位大佬前来交流学习前端内容！！
奔跑的蜗牛run
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue教程(四十)Runtime + Compiler和Runtime-only的区别
yuan_xw的专栏
08-14 1366
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
Vue中 Runtime-Only和Runtime + Compiler的区别
最新发布
c103363的博客
02-21 893
在 Vue 项目中，Runtime-Only 和 Runtime + Compiler 是两种不同的构建方式。 Runtime-Only（仅运行时）：在 Runtime-Only 构建中，Vue 库只包含运行时的代码，不包含模板编译器。 Runtime + Compiler（运行时 + 编译器）：在 Runtime + Compiler 构建中，Vue 库包含运行时的代码和模板编译器。
vue-cli构建项目时，选runtime-compiler与runtime-only的区别
单口相声Jay
07-04 182
编译，指的是vue项目中的template会首先解析为ast，再编译为render函数，接着形成virture dom，最后将virture dom渲染到页面。隐藏的配置文件在node-mudules的@vue中，一般不要修改（隐藏就是不希望被修改），如果一定要重新配置，一般是在项目中新建vue.config.js文件进行配置。指的是项目运行时，直接进入render，而template-ast这个过程由npm-template-compiler插件自行完成，经历过程为：render-vm-ui。
Vue中 runtime-compiler 和 runtime-only 两种构建模式
weixin_44100002的博客
09-10 1683
一、介绍 在使用 vue-cli 脚手架构建项目时，会遇到一个构建选项 Vue build，有两个选项，Runtime + Compiler和Runtime-only： · Runtime + Compiler: recommended for most users （运行程序+编译器:推荐给大多数用户） · Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed i
VUE程序运行过程-runtime-complier和runtime-only的区别
ICanWin_lll的博客
01-26 730
一.VUE程序运行过程 当把template传递给vue实例的时候，vue实例会把该模板内容保存到vm.options， 然后对该template解析成ast(抽象语法树) 将ast编译为render()函数，通过render函数翻译成虚拟DOM 将虚拟DOM渲染成真实的DOM 二.Runtime-Compiler和Runtime-only 1.Runtime-Compiler： 选择Runtime-Compiler创建的项目main.js： import Vue from 'vu
解决vue和vue-template-compiler版本不一样的快捷办法
01-07
vue项目，package.json中Vue和vue-template-compiler版本不一致时，执行npm run dev有时会报错 提示如下内容 in ./src/views/login/index.vue Module build failed: Error: Vue packages version mismatch: - vue@...
解决vue-cli3 使用子目录部署问题
01-19
在使用 vue-cli3 build的时候，使用非子目录需要在 vue.config.js 中添加如下代码： ...[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Eithe
vue-svg-component-builder：用于为SVG图像创建Vue组件的工厂功能
02-21
当前，唯一可接受的输入格式是vue-component-compiler的AST输出import { build } from 'vue-svg-component-builder'import { compile } from 'vue-component-compiler'let svg = fs . readFileSync ( '
关于vue-cli3打包代码后白屏的解决方案
01-19
前言 ： ... runtimeCompiler: true, publicPath: './' ... } 满心欢喜的打开，结果还是白屏。打开调试发现文件路径是正确的，这就唧唧了！！。 发现问题 各种百度。发现了样的问题 一看vue-rout
vue-cli学习二：vue-cli3版本 创建vue项目后，Runtime-Compiler和Runtime-only两个模式详解；vue项目管理器；配置文件的配置在哪，以及如何配置
冯安晨
03-10 2117
文章目录前言一、Runtime-Compiler和Runtime-only两个模式1. 模式来源2. 案例显示3. 区别4. 引发思考二、Vue程序运行过程和原因三、render 函数使用1. 使用方式一2. 使用方式二四、eslint 关闭五、脚手架2和3版本的配置文件1. 脚手架2版本1. 脚手架3版本六、vue项目管理器七、脚手架3版本创建项目的配置文件配置1. vue项目管理器配置2. 脚手架2版本配置3. `vue.config,js` 前言 一、Runtime-Compiler和Runtime-
Vue CLI 使用和安装
幻辰科技 nbhctec.com
05-13 229
安装VueCLI : npm install -g @vue/cli 然后拉起CLI2 :方便可以创建CLI 2的项目： npm install -g @vue/cli-init 1、 创建CL2 的项目 vue init webpack 项目名称 ?Project name vuecli2 //项目名称 ? Project description test vue cli2 //项目说明 ? Author Ts //作者 ? Vue build (Use a...
Vue中runtime-compile和runtime-only的区别
千里小马哥的博客
02-08 899
runtime-compile: 流程：template->ast(抽象语法树)->render->vdom->ui (性能低，代码多) runtime-only: 流程： render->vdom->ui (性能高，代码少) ...
VUE 的 Runtime Only 和 Runtime + Compiler
星环
08-22 368
VUE 的 Runtime Only 和 Runtime + Compiler
vue-cli3 [Vue warn]: You are using the runtime-only build of Vue where the template compileris is
lishi9092的博客
01-18 1320
在 vue.config.js 中 module.exports = { ` runtimeCompiler: true, // 加入内容
Vue+webpack学习案例(一)-构建Vue项目
iuoon的博客
10-21 1万+
一、Vue简介         Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。       Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。 二、构建Vue+webpack应用          Vue.js
Runtime Only VS Runtime + Compiler
南国以北的博客
08-03 378
vue Runtime Only 与 Runtime + Compiler两种版本的区分 在用vue-cli脚手架生成vue项目时，会让我们选择 runtime only和runtime+compiler两种版本，这两种版本有什么区别呢？ Runtime Only 我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的 vue-loader 工具...
关于Vue中使用的版本runtime-only和runtime-compile的报错的解决办法
Funny_Ma的博客
10-07 652
runtime-only -> 代码中，不可以有任何的template runtime-compile->代码中，可以有template，因为有compile可以编译template 需要在webpack.config.js中添加如下代码： ...
【vue-cli安装】runtime-compiler&runtime-only
qq_43228826的博客
02-08 552
vue-cli构建项目，可选择使用 runtime-compiler 或 runtime-only 分别创建出两个项目，其唯一的区别在main.js中，vue实例是否使用template 1.runtime-compiler 原理：template -- ast -- render -- Virtual Dom -- UI 1）内部将vue中的template模板解析成abstractsyntaxtree（ast）抽象语法树 2）抽象语法树再编译成render函数 3）render...
vue中runtimecompiler和runtimeonly的区别
热门推荐
a1345954104的博客
03-20 1万+
简单总结 如果在之后的开发中，你依然使用template，就需要选择runtimecompiler 如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择runtimeonly runtimecompiler Vue中的模板如何最终渲染成真实DOM template -> ast -> render -> vdom -> UI runtimeonly Vue中的模...
vue.runtime.esm.js?c320:4605 [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.
06-13
这个警告信息表明你正在使用 Vue 的 runtime-only 构建版本，而模板编译器不可用。这可能是因为你在使用 Vue 的时候没有将其编译器包含在内，而只使用了运行时构建版本。为了解决这个问题，你可以尝试以下两种方法： 1. 使用编译器包含在内的构建版本。你可以在引入 Vue 的时候，使用完整的构建版本，而非仅使用运行时构建版本。例如： ```javascript import Vue from 'vue/dist/vue.js' ``` 这样，你就可以使用 Vue 的模板编译器了。 2. 预编译模板为渲染函数。如果你想要继续使用运行时构建版本，可以将 Vue 模板预编译为渲染函数。这样，就不需要在客户端编译模板了，可以提高性能。你可以使用 vue-template-compiler 将模板编译为渲染函数，然后在应用程序中使用它们。例如： ```javascript import Vue from 'vue' import { compile } from 'vue-template-compiler' const template = '<div>Hello {{ name }}!</div>' const render = compile(template).render new Vue({ el: '#app', data: { name: 'world', }, render, }) ``` 以上两种方法都可以解决这个问题，具体选择哪种方法取决于你的应用程序需求和性能需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值