Vue 3.0 使用 Vuetify中的坑

吃魚不吐刺發表於2020-09-09

出現如下問題:
You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
報錯詳情如下:

.......
?  Invoking generator for vue-cli-plugin-vuetify...
 ERROR  Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
    at Collection.get (C:\Users\aa\AppData\Local\Yarn\Data\global\node_modules\jscodeshift\src\Collection.js:213:13)
    at injectOptions (C:\Users\aa\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\util\codemods\injectOptions.js:15:6)
    at runTransformation (C:\Users\aa\AppData\Local\Yarn\Data\global\node_modules\vue-codemod\dist\src\run-transformation.js:61:17)
    at Object.keys.forEach.file (C:\Users\aa\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\Generator.js:290:23)
    at Array.forEach (<anonymous>)
    at Generator.resolveFiles (C:\Users\aa\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\Generator.js:276:24)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  • 背景
    程式執行環境如下:

    Vue CLI: @vue/cli 4.5.4
    NPM: 6.9.0
    Vue: 3.0.0-0
    系統:Windows 10

  • 安裝方式

    ①整個專案使用的是vue create [my-project]建立;
    ②安裝Vuetify UI,最開始採用的是NPM/YARN的方式安裝(npm install vuetifyyarn add vuetify),按照官網上此流程安裝後,一直報錯……(此處省略具體報啥錯,反正就是編譯不透過),尋求無解後採用vue add vuetify方式安裝。

  • vue add vuetify安裝說明(下面是重點!!!!!)

    如果透過vue create [my-project]這個命令建立了專案後,然後再在專案的根目錄下直接執行vue add vuetify命令,且在允許vue add vuetify這個安裝命令之前沒有對專案中的main.js程式碼做任何更改的話,大機率是會報錯的,報錯的具體內容見文章開頭。遇到上面的錯誤,解決辦法如下:

//main.js 預設程式碼
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

//為了順利利用vue add vuetify命令進行安裝,需要在輸入命令之前更改main.js程式碼
//main.js 更改後程式碼
import Vue from 'vue'
import App from './App.vue'

new Vue({
    render: h => h(App)
}).$mount('#app');

main.js進行如上的更改後,再執行vue add vuetify即可順利安裝。


之所以會出現這個問題,是因為當前Vue 3.0釋出不久,vuetify對Vue 3.0的語法沒有做適配更新,只能使用Vue 2.0的語法。當然,如果你使用的是Vue 2.0建立的專案,那麼就不會存在這個問題。

參考連結如下:
https://github.com/vuetifyjs/vue-cli-plugins/issues/140

本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章