vue对不同构建版本的解释，以及vue-cli3中如何配置别名

构建版本

在node_modules中vue文件夹下/dist中存放着所有vue不同的构建版本

官方示例

image.png

完整版：顾名思义，同时包含了编译器和运行时的版本

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

运行时：用来创建Vue实例，渲染并处理虚拟DOM等的代码

UMD：UMD 版本可以通过 <script> 标签直接用在浏览器中。

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

ES Module：ES Module 版本用来配合现代打包工具比如 webpack 2 或 Rollup。

运行时+编译器与只包含运行时的区别

比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版

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

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

配置环境别名

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

关于vue-cli3中环境别名的配置方法

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