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

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

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 個作用都用在什么場景, 有什么區別。

Vue項目按照構建方式分, 可以分成 完整構建 和 運行時構建。

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

簡單來說, 完整構建 和 運行時構建的區別就是, 可不可以用template選項, 和文件大一點,小一點。而按照不同的規范可以運行在不同的開發環境中。

vue.common.js屬于: 基于 CommonJS 的完整構建可以用于 Webpack-1 和Browserify 之類打包工具，因為是完整構建, 所以可以使用template選項, 如:

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 的完整構建?？梢杂糜?Webpack-2 和 rollup 之類打包工具，因為是完整構建, 所以可以使用template選項, 如:

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

     
Basic

   

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

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

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

vue.js屬于: 基于 UMD 的完整構建。可以用于直接 cdn 引用，因為是完整構建, 所以可以使用template選項, 如:

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('h2', 'Hi Vue')
 }
}).$mount('#app')
vue.runtime.esm.js

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('h2', 'Hi Vue')
 }
}).$mount('#app')

vue.runtime.js屬于: 基于 UMD 的運行時構建，可以用于直接 CDN 引用。該版本和vue.js類似, 可以用于直接 CDN 引用, 因為不包含編譯器, 所以不能使用template選項, 只能使用render函數：

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

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

這里留給大家一個思考題，在用vue-cli構建vue項目時，一般會有一個選項，如下：

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