Vue is available in two different versions, Vue full (vue.js) and Vue runtime (vue.runtime.js).

  • Full version: Contains both compiler and runtime versions.
  • Compiler: Code used to compile template strings into JavaScript rendering functions.
  • Runtime: Code for creating Vue instances, rendering and processing virtual DOM, and so on. Basically everything else is stripped out of the compiler.

Simply put, the full version allows the template to compile on the client side, whereas the runtime version does not.

// A compiler is required
new Vue({
  template: '<div>{{ hi }}</div>'
})

// No compiler is required
new Vue({
  render (h) {
    return h('div'.this.hi)
  }
})
Copy the code

Because the runtime version does not include a compiler, it is smaller than the full version. While the compiler work can be done by vue-loader during build, the compiler is not actually needed in the final package, so just the runtime version.

In webPack or @vue/ CLI configuration, the default configuration is the runtime version. If you want to use the full version, in addition to specifying the version by URL when the CDN introduces the Vue, you can also add alias when configuring webpack:

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // to use webpack 1, use 'vue/dist/vue.com.js'}}}Copy the code