You are using the runtime-only build of Vue where the template compiler is not available. Either pre

在升級腳手架到vue-cli3.0版本的時候出現了這個報錯：

[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模式（運行時），vue模塊的package.json的main字段默認為runtime模式， 指向了"dist/vue.runtime.common.js"位置。

這是vue升級到2.0之后就有的特點。

而我的main.js文件中，初始化vue卻是這么寫的，這種形式為compiler模式的，所以就會出現上面的錯誤信息

// compiler
new Vue({
  el: '#app',
  router: router,
  store: store,
  template: '<App/>',
  components: { App }
})

解決辦法

將main.js中的代碼修改如下就可以

//runtime

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

到這里我們的問題還沒完，那為什么之前是沒問題的，之前vue版本也是2.x的呀？

這也是我要說的第二種解決辦法

因為之前我們的webpack配置文件里有個別名配置，具體如下

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js' //內部為正則表達式  vue結尾的
    }
}

也就是說，import Vue from ‘vue’ 這行代碼被解析為 import Vue from ‘vue/dist/vue.esm.js’，直接指定了文件的位置，沒有使用main字段默認的文件位置

所以第二種解決方法就是，在vue.config.js文件里加上webpack的如下配置即可，

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

既然到了這里我想很多人也會想到第三中解決方法，那就是在引用vue時，直接寫成如下即可

import Vue from 'vue/dist/vue.esm.js'