渲染過程中存取了未定義的屬性'$primevue'

Question

案例與問題

我正在使用Vue.js進行一個私人項目，並且遇到了以下錯誤，當我嘗試使用PrimeVue的FileUpload組件時發生：

[Vue warn]: 在渲染期間存取了屬性“$primevue”，但該屬性在實例上未定義。 

嘗試在我的元件中使用FileUpload：

<code><template>
  <FileUpload name="demo[]" url="" @upload="onUpload" :multiple="true" :maxFileSize="1000000"true>
    <template #empty>
      <p>拖曳文件到此處上傳。 </p>
    </template>
  </FileUpload>
</template>
</code>

只有當我嘗試使用FileUpload時才會出現錯誤，如果我刪除它，組件就可以正常工作。 FileUpload和PrimeVue都已按照應該的方式在main.js中導入：

<code>import {createApp} from 'vue'
import router from "./router";
import store from "./store";
import PrimeVue from "primevue/config";
import PrimeIcons from "primevue/config";
import App from "./App";

const app = createApp(App);

app.use(
    router,
    PrimeVue,
    PrimeIcons,
    store
)

import 'primevue/resources/primevue.min.css'
import 'primeflex/primeflex.css'
import 'primeicons/primeicons.css'
import 'primevue/resources/themes/bootstrap4-dark-purple/theme.css'

import Card from "primevue/card";
import Menubar from "primevue/menubar";
import FileUpload from "primevue/fileupload";

app.component('Card', Card)
app.component('Menubar', Menubar)
app.component('FileUpload', FileUpload)

app.mount('#app')
</code>

我試過的方法

我搜尋了這個問題，但唯一與此錯誤完全匹配的是GitHub上關於Calendar組件的一個舊的已關閉的問題：Issue #808。這個問題是由於新的PrimeVue API的重大變更所引起的。這不應該是我的情況，因為它是在V3.1中引入的，而我正在使用V3.7。

如果版本是問題，我測試了不同版本的PrimeVue，如3.1、3.2、3.3，但錯誤仍然存在。因此，實際的依賴關係仍然是最新的：

"primevue": "^3.7.0"

也許在SO或Google上已經存在解決方案，但是要么我的英語太差以至於無法理解，要么我對Vue.js還不夠熟悉以理解這個問題。

提前感謝！

Answer 1

您對 app.use() 的使用方式是錯誤的：

app.use(
    router,
    PrimeVue,
    PrimeIcons,
    store
)

app.use() 只接受兩個參數：

• 第一個參數：Vue 外掛程式
• 第二個參數：外掛選項

另外，PrimeIcons 不是一個插件，所以不應該傳遞給 app.use()。

解決方案

將每個外掛程式單獨傳遞給 app.use()：

app.use(router)
   .use(PrimeVue)
   //.use(PrimeIcons)   // 不是一个插件
   .use(store)