構(gòu)建版本

在node_modules中vue文件夾下/dist中存放著所有vue不同的構(gòu)建版本

官方示例

image.png

完整版： 顧名思義，同時包含了編譯器和運行時的版本

編譯器：用來將模板字符串編譯為JavaScript渲染函數(shù)的代碼

運行時：用來創(chuàng)建Vue實例，渲染并處理虛擬DOM等的代碼

UMD：UMD 版本可以通過 <script> 標簽直接用在瀏覽器中。

CommonJS：用來配合老牌打包工具比如 Browserify 或 webpack 1

ES Module：ES Module 版本用來配合現(xiàn)代打包工具比如 webpack 2 或 Rollup。

運行時+編譯器 與 只包含運行時的區(qū)別

比如傳入一個字符串給 template 選項，或掛載到一個元素上并以其 DOM 內(nèi)部的 HTML 作為模板)，就將需要加上編譯器，即完整版

// 需要編譯器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要編譯器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

配置環(huán)境別名

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時需用 'vue/dist/vue.common.js'
    }
  }
}

關(guān)于vue-cli3中環(huán)境別名的配置方法

// vue.config.js
module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js'
            }
        }
    },
}