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/ 代替 >>>

<style scoped> now support "deep" selectors that can affect child components using the >>> combinator:

用這麼潮的框架，就是累人啊啊啊啊。