【解決】You are using the runtime-only...

直奔主題

不想往下看的看這裏。我是用的vue-cli4,項目報錯是因爲我對一個子路由的組件使用了非template模板，代碼如下

const User = {
  template: '<div>User</div>'
}

然後將User置於路由對應的組件，當把User新建到一個新的.vue文件中，系統便不在報錯。

背景

今天在學習vue-router的過程中，當我通過聲明變量的形式創建組件時，並將變量賦值給路由的組件，當訪問到該組件後，控制檯會莫名的報一個錯誤，並且不展示該組件內容，錯誤信息如下：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.js引用的不對，要通過覆寫vue.config.js來改變路徑，但是這是爲什麼呢？於是乎我去查了系統隱藏的webpack配置文件output.js時，發現vue-cli4有一個默認的配置，如下：

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

這個時候就需要有一張官方的圖來鎮鎮場子：

那真相大白了，就是沒用對正確支持這種變量組件寫法的vue.js!
通過編輯vue.config.js配置文件可以改變這一現狀，有兩種方式：
其一，通過上一篇博客說的,只不過這一次不要添加resolve了，那是針對根目錄作爲相對路徑的。

chainWebpack: (config) => { // @/ 是 src/ 的別名,默認配置
      config.resolve.alias
        .set('@mixins', resolve('src/mixins'))
        .set('vue$', 'vue/dist/vue.esm.js')
}

其二，通過configureWebpack。可見，訪問node_modules中的文件可以直接寫路徑,添加如下代碼。

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

最後說點啥

你以爲如果解決問題的路程如此簡單，我會寫這麼一篇博客來水嘛？當然不！當我一開始查看output.js的時候，我直接把他看成了

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

然後我想說，爲什麼配置對了還是會報錯呢，然後就開展了一系列的尋錯之旅，爲了不誤人子弟，我就不多寫了，當然，這個問題是我寫博客寫到一半經一位道友點撥纔看透的…不然也不會強忍着把這篇博客寫完，希望大家可以從中學習點什麼吧。。晚安。