Vue 3.0 使用 Vuetify中的坑

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

出現如下問題：
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 vuetify或yarn 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 協議》，轉載必須註明作者和本文連結

相關文章