vue构建版本

在这里插入图片描述

  • 完整版:同时包含编译器和运行时的版本。

  • 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。

  • 运行时runtime:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

  • UMD:UMD 版本可以通过 script 标签直接用在浏览器中。

  • CommonJS(common、cjs):CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。这些打包工具的默认文件(pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js)。

  • ES Module(esm):从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件:

    1.为打包工具提供的 ESM:为诸如 webpack 2 或 Rollup 提供的现代打包工具。ESM 格式被设计为可以被静态分析,所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包。为这些打包工具提供的默认文件 (pkg.module) 是只有运行时的 ES Module 构建 (vue.runtime.esm.js)。
    2.为浏览器提供的 ESM (2.6+):用于在现代浏览器中通过 <script type="module"> 直接导入。

  • bundler(这个版本没有打包所有的代码,只会打包使用的代码,需要配合打包工具来使用,会让Vue体积更小)

  • browser(版本都包含esm,浏览器的原生模块化方式,可以直接通过<script type="module" />的方式来导入模块)

  • prod和min都是生产版本,对代码进行了压缩

  • vue.esm.browser.js: 是 Vue.js 的一个构建版本,针对浏览器环境而设计。这个构建版本采用了 ES Module (ESM) 的格式,使得你可以在支持 ES Module 的环境中直接使用 import 语句来导入Vue.js,例如在现代的前端开发工具链中,比如 webpack、Rollup 等。

  • vue.common.js 是 Vue.js 的一个构建版本,它主要用于在 CommonJS 环境中使用,可以在 Node.js环境中使用 Vue.js 来构建服务端渲染的应用程序,或者在使用一些构建工具如 Browserify 的情况下,在浏览器中使用CommonJS 模块加载 Vue.js。

通过 template 选项提供的模板将会在运行时即时编译。这仅在使用了包含模板编译器的 Vue 构建版本的情况下支持。文件名中带有 runtime 的 Vue 构建版本未包含模板编译器。

vue.global.js:是包含编译器和运行时的“完整”构建版本,因此它支持动态编译模板。
vue.runtime.global.js:只包含运行时,并且需要在构建步骤期间预编译模板。
其中,如果需要在客户端上编译模板 (即:将字符串传递给template 选项,或者使用元素的DOM内HTML 作为模板挂载到元素),将需要编译器,因此需要完整的构建版本
当使用Webpack的vue-loader时,*.vue 文件中的模板会在构建时预编译为JavaScript,在最终的捆绑包中并不需要编译器,因此可以只使用运行时构建版本。所以,如果直接在浏览器打开Vue的页面,可以直接采用script引入完整版本,如果采用构建工具例如Webpack进行构建,则可以使用import引入运行时版本

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/498700.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【2024创业风向标】随身WiFi成财富新宠,格行带你解锁无限商机!

近日&#xff0c;一股“随身WiFi创业潮”悄然兴起&#xff0c;成为不少创业者和投资者关注的焦点。在这个5G时代&#xff0c;网络已成为生活不可或缺的一部分&#xff0c;而格行随身WiFi凭借其便捷、高效的特点&#xff0c;正成为市场新宠。 据了解&#xff0c;格行随身WiFi不仅…

MySQL里的两个“二次”

文章中所有图片均来自网络 一、double write 第一个二次是mysql一个崩溃恢复很重要的特性-重复写入。 doublewrite缓冲区是位于系统表空间中的存储区域&#xff0c;在该区域中&#xff0c;InnoDB会在将页面写入数据文件中的适当位置之前&#xff0c;从InnoDB缓冲池中刷新这些页…

【Redis | 第一篇】快速了解Redis

文章目录 1.快速了解Redis1.1简介1.2与其他key-value存储的不同处1.3Redis安装——Windows环境1.3.1下载redis1.3.2启动redis1.3.3进入redis客户端1.3.4修改配置 1.4Redis安装——Linux环境1.4.1安装命令1.4.2启动redis1.4.3进入redis客户端 1.5配置修改1.6小结 1.快速了解Redi…

巧妙解决接口测试产生脏数据问题

测试数据创建后需要对其删除&#xff0c;不然可能产生脏数据&#xff0c;对开发和测试、生产环境造成一定影响。 其接口框架是基于Python&#xff0c;API规范基于REST。 产生原因 改进前&#xff1a;清除资源的操作放在每个正向测试用例里&#xff0c;没有在setUp和tearDown…

【C++11】C++11新特性(下)

1、类的新功能 namespace flash {class string{public:// 构造函数string(const char* str ""):_size(strlen(str)), _capacity(_size){//cout << "string(char* str)" << endl;_str new char[_capacity 1];strcpy(_str, str);}// 交换两个…

【AI Agent系列】【MetaGPT多智能体学习】3. 开发一个简单的多智能体系统,兼看MetaGPT多智能体运行机制

本系列文章跟随《MetaGPT多智能体课程》&#xff08;https://github.com/datawhalechina/hugging-multi-agent&#xff09;&#xff0c;深入理解并实践多智能体系统的开发。 本文为该课程的第四章&#xff08;多智能体开发&#xff09;的第一篇笔记。主要记录下多智能体的运行…

java -进行堆转储文件分析

文章目录 前言java -进行堆转储文件分析1. 首先在window上主动生成堆转储文件2. 获取堆转储文件的方式3. 堆转储文件分析 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人…

【c语言】探索结构体---解锁更多选择

前言 结构体属于自定义类型的一种&#xff0c;这增加了我们写代码的选择&#xff0c;跟着我的脚步一起来探索结构体吧~ 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 认识结构体 结构是⼀些值的集合&#xff0c;这些值…

java找工作之JavaWeb(一)

JavaWeb 一个web应用有多部份组成&#xff08;静态web&#xff0c;动态web&#xff09; html&#xff0c;css&#xff0c;jsjsp&#xff0c;servletjava程序jar包配置文件(Properties) web应用程序编写完毕后&#xff0c;若想提供给外界访问&#xff0c;需要一个服务器来统一…

[ffmpeg] x264 配置参数解析

背景 创建 x264 编码器后&#xff0c;其有一组默认的编码器配置参数&#xff0c;也可以根据需要修改参数&#xff0c;来满足编码要求。 具体参数 可修改的参数&#xff0c;比较多&#xff0c;这边只列举一些常用的。 获取可以配置的参数 方式1 查看 ffmpeg源码 libx264.c…

动态规划|【斐波那契数列模型 】|面试题08.01三步问题

目录 题目 思路 普通思路 动态规划思路 1.状态表示 2.状态转移方程 3.初始化 4.填表顺序 5.返回值 代码 空间优化 题目 题目链接 面试题 08.01. 三步问题https://leetcode.cn/problems/three-steps-problem-lcci/ 三步问题。有个小孩正在上楼梯&#xff0c;楼梯有n…

【软考高项】【计算专题】- 6 - 成本类 - 挣值管理

目录 一、知识点 1、基础概念 1.1 教材定义 1.2 理解方式 方式一&#xff1a;使用公式理解 方式二&#xff1a;使用语言描述 2、总结 2.1 三个参数 2.2 四个指标 2.3 其他关键参数 二、真题举例 高级2014年下半年案例分析试题 【问题1】 【问题2】 【问题3】 一…