PrimeVue Toast组件错误:无法解决*/吐司中的'./ToastMessage‘

Question

我目前正在使用vuejs启动一个新项目，并希望将primevue用于一些组件。总的来说，我对VueJS的了解并不是最好的，因为我刚刚开始使用它。我的应用程序有一个基于webpack的构建，配置了vue-加载程序，所以primevue是如何安装的。

我试图使用Toast组件，但是当从'primevue/toastservice‘导入Toast时，webpack抛出了以下两个错误：

./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js&)中的

误差

模块未找到:错误:无法解决'./ToastMessage‘中的’*/node_node/primevue/components/toast‘

@ ./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js&) 11:0-42 86:24-36

@ ./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js&

@ ./node_modules/primevue/components/toast/Toast.vue

@ ./node_modules/primevue/toast.js

@ ./src/main.js

和

./node_modules/primevue/components/toast/Toast.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/toast/Toast.vue?vue&type=style&index=0&lang=css&) 97:0中的

错误

模块解析失败:意外令牌(97:0)

这些加载程序处理了文件：

*./node_modules/vue-加载程序/lib/index.js

您可能需要一个额外的加载程序来处理这些加载程序的结果。

|

|

-> .p-吐司{

4.职位:固定；

宽度:20；

@ ./node_modules/primevue/components/toast/Toast.vue?vue&type=style&index=0&lang=css& 1:0-118 1:134-137 1:139-254 1:139-254

@ ./node_modules/primevue/components/toast/Toast.vue

@ ./node_modules/primevue/toast.js

@ ./src/main.js

我导入组件如下：

import Vue from "vue";
import App from "./App/App.vue";
import Toast from 'primevue/toast';
import ToastService from 'primevue/toastservice';

Vue.use(ToastService);
Vue.component('Toast', Toast);

new Vue({
  render: h => h(App)
}).$mount("#app");

我已经尝试过在我的App.js或其他文件中导入/使用'Toast‘组件，在那里我主要想使用那些Toast，但没有成功。

如果我漏掉了烤面包，一切都很好，所以ToastService看起来不错。

因此，如果有谁使用primevue，也遇到了这个问题，并找到了解决办法，我提前感谢大家。

Answer 1

对于您的第二个错误，我有一个解决方案，但不知道如何修复您的第一个“无法解决”错误，因为我仍在计算这个错误。

你的webpack配置是什么样子的？是否为CSS文件指定规则？如果组件使用<style>块，则需要告诉webpack如何处理此问题。

为.css文件指定一条规则，并将同样的规则应用于.vue文件中的<style>块。没有这一点，webpack就不知道如何解析这些区块。

因此，请确保您的webpack.config.js rules部分中包含以下CSS部分(或类似的部分)：

rules: [
    {
        test: /\.vue$/,
        use: 'vue-loader'
    },
    // the below will apply to both plain `.css` files AND `<style>` blocks in `.vue` files
    {
        test: /\.css$/,
        use: [
            'vue-style-loader',
            'css-loader'
        ]
    }
]

还要确保在您的package.json中安装相关的工具。

我解决了一些类似的问题，因此请参阅我的question and answer以获得更详细的信息。

Answer 2

npm install mitt

解决了第一个问题。它包含在primevue包的devDependencies中，但出于某些原因，它没有安装。