Question

我目前正在使用vuejs启动一个新项目，并希望对某些组件使用primevue。一般来说，我对VueJS的了解不是最好的，因为我才刚刚开始。我的应用程序具有基于Webpack的构建，并配置了vue-loader，因此这就是如何安装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文件指定规则？如果组件使用<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中安装相关工具。

我解决了类似的问题，所以请查看我的question and answer，以获取更多详细信息。

Answer 2

npm install mitt

解决了第一个问题。它包含在primevue软件包的devDependencies中，但是由于某些原因，它尚未安装。

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

2 个答案: