解析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 相关文章推荐
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
Angular 路由route实例代码
Jul 12 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 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
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
javascript回调函数详解
2018/02/06 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
如何写好升职自荐信
2014/01/06 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
住宅使用说明书
2014/05/09 职场文书
调研汇报材料范文
2014/08/17 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
生活小常识广播稿
2015/08/19 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python