解析Vue2 dist 目录下各个文件的区别


Posted in Javascript onNovember 22, 2017

vue2 经过 2.2 版本升级后, 文件变成了 8 个:

  1. vue.common.js
  2. vue.esm.js
  3. vue.js
  4. vue.min.js
  5. vue.runtime.common.js
  6. vue.runtime.esm.js
  7. vue.runtime.js
  8. vue.runtime.min.js

瞬间就懵逼了, 这些文件该怎么选?

下面就来说下, 这 8 个作用都用在什么场景, 有什么区别

按照构建方式分, 可以分成 完整构建(包含独立构建和运行时构建) 和 运行时构建

按照规范分, 可以分成 UMD, CommonJS 和 ES Module

简单来说, 完整构建 和 运行时构建的区别就是, 可不可以用template选项, 和文件大一点,小一点

vue.common.js

属于: 基于 CommonJS 的完整构建

可以用于 Webpack-1 和 Browserify 之类打包工具

因为是完整构建, 所以可以使用template选项, 如:

import Vue from 'vue'
new Vue({
 template: `
  <div id="app">
   <h1>Basic</h1>
  </div>
 `
}).$mount('#app')

注意: 用 webpack-1 之类打包工具时, 使用该版本, 需要配置别名, 以 webpack 为例:

{
 resolve: {
  alias: {
   'vue$': 'vue/dist/vue.common.js'
  }
 }
}

vue.esm.js

属于: 基于 ES Module 的完整构建

可以用于 Webpack-2 和 rollup 之类打包工具

因为是完整构建, 所以可以使用template选项, 如:

import Vue from 'vue'
new Vue({
 template: `
  <div id="app">
   <h1>Basic</h1>
  </div>
 `
}).$mount('#app')

注意: 用 webpack-2 之类打包工具时, 使用该版本, 需要配置别名, 以 webpack 为例:

{
 resolve: {
  alias: {
   'vue$': 'vue.esm.js'
  }
 }
}

vue.js

属于: 基于 UMD 的完整构建

可以用于直接 CDN 引用

因为是完整构建, 所以可以使用template选项, 如:

<script src="https://unkpg.com/vue/dist/vue.js"></script>
<script>
new Vue({
 template: `
  <div id="app">
   <h1>Hi Vue</h1>
  </div>
 `
}).$mount('#app')
</script>

vue.min.js

和 vue.js 一样, 属于压缩后版本

vue.runtime.common.js

属于: 基于 CommonJS 的运行时构建

可以用于 Webpack-1 和 Browserify 之类打包工具

运行时构建不包含模板编译器,因此不支持template选项,只能用render选项,但即使使用运行时构建,在单文件组件中也依然可以写模板,因为单文件组件的模板会在构建时预编译为render函数, render函数的使用, 请参考: http://cn.vuejs.org/v2/guide/render-function.html

import Vue from 'vue'
new Vue({
 render: function(h){
  return h('h1', 'Hi Vue')
 }
}).$mount('#app')

vue.runtime.esm.js

属于: 基于 ES Module 的运行时构建

可以用于 Webpack-2 和 rollup 之类打包工具

运行时构建不包含模板编译器,因此不支持template选项,只能用render选项,但即使使用运行时构建,在单文件组件中也依然可以写模板,因为单文件组件的模板会在构建时预编译为render函数, render函数的使用, 请参考: http://cn.vuejs.org/v2/guide/render-function.html

import Vue from 'vue'
new Vue({
 render: function(h){
  return h('h1', 'Hi Vue')
 }
}).$mount('#app')

vue.runtime.js

属于: 基于 UMD 的运行时构建

可以用于直接 CDN 引用

该版本和vue.js类似, 可以用于直接 CDN 引用, 因为不包含编译器, 所以不能使用template选项, 只能使用render函数

<script src="https://unkpg.com/vue/dist/vue.runtime.js"></script>
<script>
new Vue({
 render: function(h){
  return h('h1', 'Hi Vue')
 }
}).$mount('#app')
</script>

vue.runtime.min.js

和 vue.runtime.js 一样, 属于压缩后版本

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 #Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 #Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 #Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 #Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 #Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 #Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 #Javascript
You might like
php 删除数组元素
2009/01/16 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
vue3.0 上手体验
2020/09/21 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Python中os.path用法分析
2015/01/15 Python
python实现各进制转换的总结大全
2017/06/18 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
SQL SERVER面试资料
2013/03/30 面试题
火锅店创业计划书范文
2014/02/02 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
团日活动总结书
2014/05/08 职场文书
质量月活动总结
2014/08/26 职场文书
简单的辞职信模板
2015/05/12 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers