[Vue 警告]：属性“$primevue”在渲染期间被访问但未在实例上定义

Question

案例与问题

我正在使用 Vue.js 开发一个私人项目并遇到以下错误，当我尝试使用 PrimeVue 的 FileUpload 组件时发生：

[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance.

尝试在我的组件中使用 FileUpload：

<template>
  <FileUpload name="demo[]" url="" @upload="onUpload" :multiple="true" :maxFileSize="1000000">
    <template #empty>
      <p>Drag and drop files to here to upload.</p>
    </template>
  </FileUpload>
</template>

错误仅在我尝试使用 FileUpload 时出现，如果我将其删除，组件将正常工作。 FileUpload 和 PrimeVue 在 main.js:

中按应有的方式导入

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')

到目前为止我尝试了什么

我搜索了这个问题，但与此错误唯一完全匹配的是 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)   // not a plugin
   .use(store)

[Vue 警告]：属性“$primevue”在渲染期间被访问但未在实例上定义

[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance

vue.js

primevue

vuejs3

解决方案