Vue2中dist目錄下各個文件的區(qū)別是什么，針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

我們擁有十余年網(wǎng)頁設(shè)計(jì)和網(wǎng)站建設(shè)經(jīng)驗(yàn)，從網(wǎng)站策劃到網(wǎng)站制作，我們的網(wǎng)頁設(shè)計(jì)師為您提供的解決方案。為企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、移動網(wǎng)站建設(shè)、H5場景定制、等業(yè)務(wù)。無論您有什么樣的網(wǎng)站設(shè)計(jì)或者設(shè)計(jì)方案要求，我們都將富于創(chuàng)造性的提供專業(yè)設(shè)計(jì)服務(wù)并滿足您的需求。

vue2 dist文件夾中有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 個作用都用在什么場景, 有什么區(qū)別。

Vue項(xiàng)目按照構(gòu)建方式分, 可以分成 完整構(gòu)建 和 運(yùn)行時構(gòu)建。

按照規(guī)范分, 可以分成 UMD, CommonJS 和 ES Module。

簡單來說, 完整構(gòu)建 和 運(yùn)行時構(gòu)建的區(qū)別就是, 可不可以用template選項(xiàng), 和文件大一點(diǎn),小一點(diǎn)。而按照不同的規(guī)范可以運(yùn)行在不同的開發(fā)環(huán)境中。

vue.common.js屬于: 基于 CommonJS 的完整構(gòu)建可以用于 Webpack-1 和Browserify 之類打包工具，因?yàn)槭峭暾麡?gòu)建, 所以可以使用template選項(xiàng), 如:

import Vue from 'vue'
new Vue({
 template: `
   

     
Basic

   

 `
}).$mount('#app')

注意: 用 webpack-1 之類打包工具時, 使用該版本, 需要配置別名, 以 webpack 為例:

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

vue.esm.js屬于: 基于 ES Module 的完整構(gòu)建?？梢杂糜?Webpack-2 和 rollup 之類打包工具，因?yàn)槭峭暾麡?gòu)建, 所以可以使用template選項(xiàng), 如:

import Vue from 'vue'
new Vue({
 template: `
   

     
Basic

   

 `
}).$mount('#app')

注意: 用 webpack-2 之類打包工具時, 使用該版本, 需要配置別名, 以 webpack 為例:

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

vue.js屬于: 基于 UMD 的完整構(gòu)建?？梢杂糜谥苯?cdn 引用，因?yàn)槭峭暾麡?gòu)建, 所以可以使用template選項(xiàng), 如:

vue.min.js和 vue.js 一樣, 屬于壓縮后版本

vue.runtime.common.js屬于: 基于 CommonJS 的運(yùn)行時構(gòu)建，可以用于 Webpack-1 和 Browserify 之類打包工具，運(yùn)行時構(gòu)建不包含模板編譯器，因此不支持template選項(xiàng)，只能用render選項(xiàng)，但即使使用運(yùn)行時構(gòu)建，在單文件組件中也依然可以寫模板，因?yàn)閱挝募M件的模板會在構(gòu)建時預(yù)編譯為render函數(shù), render函數(shù)的使用, 請參考: http://cn.vuejs.org/v2/guide/render-function.html

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

vue.runtime.esm.js屬于: 基于 ES Module 的運(yùn)行時構(gòu)建?？梢杂糜?Webpack-2 和 rollup 之類打包工具。運(yùn)行時構(gòu)建不包含模板編譯器，因此不支持template選項(xiàng)，只能用render選項(xiàng)，但即使使用運(yùn)行時構(gòu)建，在單文件組件中也依然可以寫模板，因?yàn)閱挝募M件的模板會在構(gòu)建時預(yù)編譯為render函數(shù), render函數(shù)的使用, 請參考: http://cn.vuejs.org/v2/guide/render-function.html

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

vue.runtime.js屬于: 基于 UMD 的運(yùn)行時構(gòu)建，可以用于直接 CDN 引用。該版本和vue.js類似, 可以用于直接 CDN 引用, 因?yàn)椴话幾g器, 所以不能使用template選項(xiàng), 只能使用render函數(shù)：

vue.runtime.min.js和 vue.runtime.js 一樣, 屬于壓縮后版本

總之記住一句話，完整構(gòu)建時是可以使用template選項(xiàng)的，而運(yùn)行時構(gòu)建是不可以使用的，但是不論哪一種，單文件組件都可以編譯為組件。 UMD規(guī)范適用于瀏覽器直接引用，不用打包。CommonJS 和 ES Module規(guī)范都需要類似webpack和rollup之類的打包工具配合才能使用。

這里留給大家一個思考題，在用vue-cli構(gòu)建vue項(xiàng)目時，一般會有一個選項(xiàng)，如下：

關(guān)于Vue2中dist目錄下各個文件的區(qū)別是什么問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。