渲染过程中访问了未定义的属性'$primevue'

Question

案例和问题

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

[Vue warn]: 在渲染期间访问了属性“$primevue”，但该属性在实例上未定义。

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

<code><template>
  <FileUpload name="demo[]" url="" @upload="onUpload" :multiple="true" :maxFileSize="1000000">
    <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)