版本区别

本节目标：理解“版本区别”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。

**语义化版本控制**

遵循语义化版本控制。

对于未公布的或内部暴露的行为，其变更会描述在发布说明中。

**开发版本与生产版本**
开发版本：

包含完整的警告

包含调试模式

不压缩代码

生产版本：

删除了警告

对代码进行了压缩，约33.30KB min+gzip

**对不同构建版本的解释**

==NPM====/vue/====dist/== ==（最新版本）==

==Npm/vue@====版本号====/dist/====（特定版本）==

==目录下，有很多 Vue.js 构建版本。==

==它们是根据不同环境中==

==引入方式==

==对功能的精简程度==

==进行区分。==

==环境分四种：====UMD, CommonJS,ES Module(====基于构建工具====),ES Module(====直接用于浏览器====)==

==UMD====：====UMD== ==版本可以通过== ==<script>== ==标签直接用在浏览器中。====jsDelivr CDN== ==的== ==https://cdn.jsdelivr.net/npm/vue== ==默认文件就是运行时== ==+== ==编译器的== ==UMD== ==版本== ==(====vue.js====)====。==

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

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

==为打包工具提供的== ==ESM====：为诸如== ==webpack 2== ==或== ==Rollup== ==提供的现代打包工具。====ESM== ==格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行“====tree-shaking====”并将用不到的代码排除出最终的包。为这些打包工具提供的默认文件== ==(====pkg.module====)== ==是只有运行时的== ==ES Module== ==构建== ==(====vue.runtime.esm.js====)====。==

==为浏览器提供的== ==ESM (2.6+)====：用于在现代浏览器中通过== ==<script type="module">== ==直接导入。==

==版本分四种：==

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

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

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

==这里列出了它们之间的差别：==

**UMD**

**CommonJS**

**ES Module (****基于构建工具使用****)**

**ES Module (****直接用于浏览器****)**

完整版

vue.js

vue.common.js

vue.esm.js

vue.esm.browser.js

只包含运行时版

vue.runtime.js

vue.runtime.common.js

vue.runtime.esm.js

完整版 (生产环境)

vue.min.js

vue.esm.browser.min.js

只包含运行时版 (生产环境)

vue.runtime.min.js

==umd====版本最全，有用于开发环境的，有用于生产环境的，不管是开发环境还是生产环境，都有完整版和运行时版本。==

==commonJs====版本和====ES Module(====构建工具版====)====只用于开发环境，不能用于生产环境。==

==ES Module====浏览器使用版本：由于是在浏览器中运行，必须有完整版本才可运行，所以没有精简的运行时版本。==

==运行时== ==+== ==编译器== ==vs.== ==只包含运行时==
==如果你需要在客户端编译模板== ==(====比如传入一个字符串给== ==template== ==选项，或挂载到一个元素上并以其== ==DOM== ==内部的== ==HTML== ==作为模板====)====，就将需要加上编译器，即完整版：==
==//== ==需要编译器========new== ==Vue({======  ==template:== =='<div>{{ hi }}</div>'========})==
==//== ==不需要编译器========new== ==Vue({======  ==render (h) {======    ==return== ==h(===='div'====,== ==this====.hi)======  ==}========})==
==当使用== ==vue-loader== ==或== ==vueify== ==的时候，====*.vue== ==文件内部的模板会在构建时预编译成== ==JavaScript====。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。==
==因为运行时版本相比完整版体积要小大约== ==30%====，所以应该尽可能使用这个版本。如果你仍然希望使用完整版，则需要在打包工具里配置一个别名：==
==webpack==
==module====.exports = {======  ==// ...======  ==resolve: {======    ==alias: {======      =='vue$'====:== =='vue/dist/vue.esm.js'== ==//== ==用== ==webpack 1== ==时需用== =='vue/dist/vue.common.js'======    ==}======  ==}========}==
==Rollup==
==const== ==alias === ==require====(===='rollup-plugin-alias'====)==
==rollup({======  ==// ...======  ==plugins: [======    ==alias({======      =='vue'====:== ==require====.resolve(===='vue/dist/vue.esm.js'====)======    ==})======  ==]========})==
==Browserify==
==添加到你项目的== ==package.json====：==
=={======  ==// ...======  =="browser"====: {======    =="vue"====:== =="vue/dist/vue.common.js"======  ==}========}==
==Parcel==
==在你项目的== ==package.json== ==中添加：==
=={======  ==// ...======  =="alias"====: {======    =="vue"== ==:== =="./node_modules/vue/dist/vue.common.js"======  ==}========}==
==开发环境== ==vs.== ==生产环境模式==
==对于== ==UMD== ==版本来说，开发环境====/====生产环境模式是硬编码好的：开发环境下用未压缩的代码，生产环境下使用压缩后的代码。==

==CommonJS== ==和== ==ES Module== ==版本是用于打包工具的，因此我们不提供压缩后的版本。你需要自行将最终的包进行压缩。==

==CommonJS== ==和== ==ES Module== ==版本同时保留原始的== ==process.env.NODE_ENV== ==检测，以决定它们应该运行在什么模式下。你应该使用适当的打包工具配置来替换这些环境变量以便控制== ==Vue== ==所运行的模式。==

==把== ==process.env.NODE_ENV== ==替换为字符串字面量同时可以让== ==UglifyJS== ==之类的压缩工具完全丢掉仅供开发环境的代码块，以减少最终的文件尺寸。==
==webpack==
==在== ==webpack 4+== ==中，你可以使用== ==mode== ==选项：==
==module====.exports = {======  ==mode:== =='production'========}==
==但是在== ==webpack 3== ==及其更低版本中，你需要使用== ==DefinePlugin====：==
==var== ==webpack === ==require====(===='webpack'====)==
==module====.exports = {======  ==// ...======  ==plugins: [======    ==// ...======    ==new== ==webpack.DefinePlugin({======      =='process.env'====: {======        ==NODE_ENV:== ==JSON====.stringify(===='production'====)======      ==}======    ==})======  ==]========}==
==Rollup==
==使用== ==rollup-plugin-replace====：==
==const== ==replace === ==require====(===='rollup-plugin-replace'====)==
==rollup({======  ==// ...======  ==plugins: [======    ==replace({======      =='process.env.NODE_ENV'====:== ==JSON====.stringify(===='production'====)======    ==})======  ==]========}).then(...)==
==Browserify==
==为你的包应用一次全局的== ==envify== ==转换。==
==NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js==
==也可以移步====生产环境部署====。==
==CSP== ==环境==
==有些环境，如== ==Google Chrome Apps====，会强制应用内容安全策略== ==(CSP)====，不能使用== ==new Function()====对表达式求值。这时可以用== ==CSP== ==兼容版本。完整版本依赖于该功能来编译模板，所以无法在这些环境下使用。==
==另一方面，运行时版本则是完全兼容== ==CSP== ==的。当通过== ==webpack + vue-loader== ==或者== ==Browserify + vueify== ==构建时，模板将被预编译为== ==render== ==函数，可以在== ==CSP== ==环境中完美运行。==
==开发版本==
==重要====：====GitHub== ==仓库的== ==/dist== ==文件夹只有在新版本发布时才会提交。如果想要使用== ==GitHub== ==上== ==Vue== ==最新的源码，你需要自己构建！==
==git== ==clone== ==https://github.com/vuejs/vue.git== ==node_modules/vue========cd== ==node_modules/vue========npm install========npm run build==
==Bower==
==Bower== ==只提供== ==UMD== ==版本。==
==#== ==最新稳定版本========$ bower install vue==
==AMD== ==模块加载器==
==所有== ==UMD== ==版本都可以直接用作== ==AMD== ==模块。==

> 来自

 <https://cn.vuejs.org/v2/guide/installation.html>

版本区别 ​

版本区别