PrimeVue Toast组件错误：无法在* / toast中解析'./ToastMessage'

Question

我目前正在使用vuejs启动一个新项目，并希望对某些组件使用primevue。一般来说，我对VueJS的了解不是最好的，因为我才刚刚开始。我的应用程序具有配置了vue-loader的基于Webpack的构建，因此这就是如何安装primevue的。

我试图使用Toast组件，但是从'primevue / toastservice'webpack导入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＆）

找不到模块：错误：无法解析'* / node_modules / primevue / components / toast中的'./ToastMessage']

@ ./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-loader / lib / index.js

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

|

|

-> .p-toast {

|位置：固定；

|宽度：20em；

@ ./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'组件，但没有成功。

如果我不添加Toast，一切正常，那么ToastService似乎还不错。

因此，如果有人使用primevue并且遇到了这个问题并找到了解决方案，我先谢谢大家。

Answer 1

您的webpack配置是什么样的？您是否为CSS文件指定规则？如果组件使用块，则需要告诉webpack如何处理。

为.css文件指定规则，并且该规则还将应用于.vue文件中的块。没有这个，webpack不知道如何解析块。

因此请确保您的webpack.config.js规则部分包含以下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了解更多详细信息。