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

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 一样, 属于压缩后版本

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Apache虚拟目录配置及vue-cli反向代理的设置方法

    配置需求来自于前后端分离.后台由于使用PHP或者Java,但是前端使用vue,React这些框架时怎么和后端有效的数据通信.反向代理是个很好的选择,虽然jsonp也可以,单并不好玩. Apache配置虚拟目录 -实际上线项目需要通过域名来访问,比如http://www.xxx.com,但在本机上如何配置虚拟域名来访问本机的项目呢? 1.找到C:\Windows\System32\drivers\etc\hosts这个文件添加以下格式内容 127.0.0.1 www.mytest.com //你的

  • 深入理解Vue-cli搭建项目后的目录结构探秘

    我最近也在研究Vue-cli的路上,今天了解一下Vue-cli目录结构,那么今天也算个学习笔记吧! 一.前言 这里先说一下使用vue-cli之前的事情. 由于刚刚接触Vue不久,就接到了一个移动端项目,于是打算使用vue来进行一次尝试,所以按照练习时候的样子,emmm先把vue.js引入网页里来,emmm自己的外联main.css样式引进来,还有自己的main.js文件,还有一些图片布拉布拉的,所以我整个项目的结构如下:(捂脸) ├── css ├── images ├── index.html

  • vuejs使用递归组件实现树形目录的方法

    vuejs使用递归组件实现树形目录的方法

    上篇文章我提到了通讯录的开发,里面的目录使用了vue的递归组件实现的树形目录,这篇文章就来讲讲如何实现树形目录吧! 首先实现效果如下,觉得菜单还是比较nice的是吧: 这边数据调用的是数据库的数据的,需要数据库进行数据的构造,这里涉及到java的构造多叉树的知识,后续我会另外写一篇文章详细讲解,这里讲下前端. 数据可以先构造json使用,这里用到的格式大概如下,以childList来嵌套子菜单: { id:YH, name:银行, pid:0, childList:[{ id:YH******,

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

    vue2 经过 2.2 版本升级后, 文件变成了 8 个: vue.common.js vue.esm.js vue.js vue.min.js vue.runtime.common.js vue.runtime.esm.js vue.runtime.js vue.runtime.min.js 瞬间就懵逼了, 这些文件该怎么选? 下面就来说下, 这 8 个作用都用在什么场景, 有什么区别 按照构建方式分, 可以分成 完整构建(包含独立构建和运行时构建) 和 运行时构建 按照规范分, 可以分成 U

  • 使用python实现正则匹配检索远端FTP目录下的文件

    遇到一个问题,需要正则匹配远端FTP目录下的文件,如果使用ftp客户端可以通过命令行很容易的做到这一点,但是暂时没有一个工具支持这样的需求,于是通过python对FTP的支持和对正则表达式的支持,写了这么一个简单的工具,用于使用正则表达式来匹配远端目录的文件. 代码如下 # coding=utf-8 ######################################################################### # File Name: reg_url.py #

  • PHP采用自定义函数实现遍历目录下所有文件的方法

    目录的遍历是PHP程序设计中经常会用到的一个功能,很多PHP项目都有这一功能模块.今天本文就来实例解析一下PHP采用自定义函数实现遍历目录下所有文件的方法.具体方法如下: 方法一:使用readir()遍历目录 实现代码如下: function listDir($dir) { if(is_dir($dir)) { if($handle = opendir($dir)) { while($file = readdir($handle)) { if($file != '.' && $file !

  • Java实现读取resources目录下的文件路径的九种方式

    目录 前情提要 方式一 方式二 方式三 方式四(重要) 方式五(重要) 方式六(重要) 方式七 方式八 方式九 前情提要 本文中提供了九种方式获取resources目录下文件的方式.其中打印文件的方法如下:     /**      * 根据文件路径读取文件内容      *      * @param fileInPath      * @throws IOException      */     public static void getFileContent(Object fileIn

  • vbs 列出该目录下所有文件和文件夹的类型,大小,和所有者

    GetOwner.VBS用法,在命令行下:GetOwner.vbs 目录名会在相应目录下生成一个TXT.TXT文件,内里列出该目录下所有文件和文件夹的类型,大小,和所有者 注意:大小以MB为单位,小于1MB的就显示为0MB, 以下是代码: G = WScript.arguments(0) Set oFSO = CreateObject("Scripting.FileSystemObject") set txt = oFSO.CreateTextFile(G&"TXT.

  • 详解uboot各目录下的文件作用

    详解uboot各目录下的文件作用

    uboot下载地址:http://ftp.denx.de/pub/u-boot/ 1.目录分布 2.目录结构变化: u-boot-2010.03及以前版本 ├── api                存放uboot提供的接口函数 ├── board              根据不同开发板定制的代码,代码也不少 ├── common             通用的代码,涵盖各个方面,已命令行处理为主 ├── cpu                与体系结构相关的代码,uboot的重头戏 ├──

  • QQ安装目录下各文件用途分析

    QQ的安装目录下的文件 ACodec.dll (音频聊天) +BQQApplication.dll (企业好友面板) *CameraDll.dll (截图文件) ChatLib.dll (聊天室相关文件) ContentTab.dll (自定义面板) Content_Config.ini (跟自定义面板有关) *CQQApplication.dll (好友面板) help_01.gif~help_13.gif (跟自定义面板有关) InPlus.dll (视频语音聊天的设置对话框有关) *ips

  • Java如何在不存在文件夹的目录下创建文件

    核心代码如下所示: 1. String strPath = "E:\\a\\aa\\aaa.txt"; File file = new File(strPath); if(!file.exists())){ file.file.mkdirs(); } 2. String strPath = "E:\\a\\aa\\aaa.txt"; File file = new File(strPath); File fileParent = file.getParentFile

  • PHP不用递归遍历目录下所有文件的代码

    实现代码: /** * PHP 非递归实现查询该目录下所有文件 * @param unknown $dir * @return multitype:|multitype:string */ function scanfiles($dir) { if (! is_dir ( $dir )) return array (); // 兼容各操作系统 $dir = rtrim ( str_replace ( '\\', '/', $dir ), '/' ) . '/'; // 栈,默认值为传入的目录 $

  • PHP读取目录下所有文件的代码

    读取目录下所有文件的代码,可以不管文件名 复制代码 代码如下: <?php   $dir = "file"; // Open a known directory, and proceed to read its contents   if (is_dir($dir)) {      if ($dh = opendir($dir)) { while (($file = readdir($dh)) !== false) {          if ($file!=".&qu

随机推荐