在 Vue 項目初始化時遇到了這樣的問題：

[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.

分析原因

Vue 的代碼有兩種形式， compiler 模式 和 runtime 模式，默認為 runtime 模式，Vue 模塊則指向 dist/vue.runtime.common.js 位置。

觀察我的 main.js 代碼，是這樣的的，跟之前的寫法大為不同：

/_ eslint-disable no-new _/;
new Vue({
  el: "#app",
  router,
  created() {},
  components: {
    App
  },
  template: "<App/>"
});

這種形式是 compiler 模式，因此就會出現(xiàn)上面的錯誤。

解決辦法

1. 直接修改 main.js 代碼

//runtime
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

在 Vue cli 2.0 中沒有出現(xiàn)這個為，是因為 2.0 中 有 webpack 的別名配置如下：

resolve:{
 alias:{
  'vue$': 'vue/dist/vue.esm.js'
 }
}

也就是說， import Vue from 'vue' 這行代碼被解析為 import Vue from 'vue/dist/vue.esm.js' , 因此直接指定了文件的位置，而沒有使用 main 字段默認的文件位置。
針對上面問題，也可以直接在 main.js 中修改引用 vue 的代碼：

import Vue from "vue/dist/vue.esm.js";

2. 修改 webpack 配置

在 Vue cli 3.0 中需要在 vue.config.js 文件里加上 webpack 的配置，具體代碼如下：

configureWebpack: {
 resolve: {
  alias: {
    'vue\$': 'vue/dist/vue.esm.js'
  }
 }