Vuejs 的 dist 文件使用指南

摘要：平时的即后缀文件不需要版本，直接即可。解决方案这里使用配置的为例，整理为个版本的配置。使用时加载版本。比如的介绍还有前所未有的块新语法，让支持覆盖子组件样式问题最近的表示可以用代替用这么潮的框架，就是累人啊啊啊啊。

项目里几个 Vuejs 版本都遇到过 vue.runtime.common.js 的报错提示：

vue 2.0.7

vue.runtime.common.js:519 [Vue warn]: Failed to mount component: template or render function not defined.

vue 2.1.0

vue.runtime.common.js:511 [Vue warn]: Failed to mount component: template or render function not defined.

vue 2.2.6

vue.runtime.common.js:556 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

查了 Vuejs 的 Release log 和 Readme 等，找出原因是 Vuejs 区分 Full 与 Runtime-only 版本。平时的 Vue Single File Component （即 .vue 后缀文件）不需要 Full 版本，直接 import Vue from "vue" 即可。

而如果用到 Vue.extend({}) 手动构造 Vue 组件的， import Vue from "vue" 会报上面的错误。要换成 vue/dist/vue.js 或 vue/dist.common.js 或 vue/dist/vue.esm.js （更多可看 : Vue Github/Explanation of Build Files ）。

我的各项目的 Vue 版本因为某些原因暂时没对齐，所以要把各版本的整理下。

这里使用 Webpack 配置 Vuejs 的 alias 为例，整理为 3 个版本的配置。使用时 import vue from "fullVue" 加载 Full 版本。

module.exports = {
  // ...
  resolve: {
    alias: {
      "fullVue": "vue/dist/vue.esm.js" // vue 2.2.0 及以后并使用 webpack 2.0
    }
  }
}

module.exports = {
  // ...
  resolve: {
    alias: {
      "fullVue": "vue/dist/vue.common.js" // vue 2.1.0 及以后，vue 2.2.0 以前, 或者 vue 2.2.0 以后但使用 webpack 1.0
    }
  }
}

module.exports = {
  // ...
  resolve: {
    alias: {
      "fullVue": "vue/dist/vue.js" // vue 2.1.0 以前
    }
  }
}

Vuejs 是个很潮的框架，各种新东西都被作者引入进来。比如 2.2.0 的 Release log 介绍：

The default export used by Webpack 2 will now point to an ES module build (dist/vue.runtime.esm.js). This means without any alias configuration, require("vue") in webpack 2 will give you an object ({ __esModule: true, default: Vue }) instead. You should only use import Vue from "vue" with webpack 2.

还有 vue-loader 前所未有的 style 块新语法，让 Vue Single File Component 支持覆盖子组件样式问题：

.foo >>> .bar { color: red; }

vue-loader 最近的 release 表示可以用 /deep/ 代替 >>>