Vue2中dist目錄下各個文件的區別是什么

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

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: `
    <div id="app">
      <h2>Basic</h2>
    </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">
      <h2>Basic</h2>
    </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">
      <h2>Hi Vue</h2>
    </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('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函數：

<script src="https://unkpg.com/vue/dist/vue.runtime.js"></script>
<script>
new Vue({
  render: function(h){
    return h('h2', 'Hi Vue')
  }
}).$mount('#app')
</script>

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

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

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

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