使用PrimeVue的FileUpload组件报错$primevue未定义如何解决
问题根因
- 错误使用Vue3的
app.use方法:Vue3中app.use单次仅支持注册一个插件,你将router、PrimeVue、PrimeIcons、store四个对象同时传入同一个app.use调用中,仅第一个参数router会被正确注册,PrimeVue未完成初始化,因此不会在实例上挂载$primevue属性,触发报错。 - PrimeIcons导入与注册逻辑错误:PrimeIcons不需要从
primevue/config导入,也无需通过app.use注册,只要引入其CSS样式即可正常使用,当前导入属于错误写法。
修复方案
修改main.js代码如下即可解决问题:
import {createApp} from 'vue' import router from "./router"; import store from "./store"; import PrimeVue from "primevue/config"; import App from "./App"; const app = createApp(App); // 拆分单个插件注册,每个use仅注册一个插件 app.use(router) app.use(PrimeVue) app.use(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')
修改完成后重启开发服务,报错就会消失,FileUpload组件可正常使用。
内容的提问来源于stack exchange,提问作者StevenSiebert
相关产品推荐
相关产品推荐

