1

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

我试图使用 Toast-Component，但是当从 '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-吐司{

| 位置：固定；

| 宽度：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并且也遇到了这个问题并找到了解决方案，我提前感谢大家。

4

2 回答 2

0

我为您的第二个错误提供了解决方案，但不确定如何解决您的第一个“无法解决”错误，因为我仍在解决这个问题。

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

为文件指定一个规则.css，它也将同样适用<style>于文件中的块.vue。没有这个，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 中安装相关工具。

我解决了类似的问题，因此请参阅我的问题和答案以获取更多详细信息。

于 2020-05-26T11:56:32.960 回答
0 
npm install mitt

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

于 2020-11-13T14:01:52.340 回答