1

現在、vuejs を使用して新しいプロジェクトを開始しており、いくつかのコンポーネントに primevue を使用したいと考えていました。VueJS を使い始めたばかりなので、一般的な VueJS に関する私の知識は最高ではありません。私のアプリケーションには、vue-loader が構成された webpack ベースのビルドがあるため、primevue のインストール方法は次のとおりです。

Toast-Component を使用しようとしましたが、'primevue/toastservice' webpack から Toast をインポートすると、次の 2 つのエラーがスローされます。

./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 を省略してもすべて正常に動作するため、ToastService は問題ないようです。

したがって、primevue を使用していて、この問題に遭遇し、解決策を見つけた人がいる場合は、事前に感謝します。

4

2 に答える 2

0

2 番目のエラーの解決策はありますが、最初の「解決できません」エラーを解決する方法がわかりません。まだ解決していないためです。

あなたの webpack 設定はどのように見えますか? CSS ファイルのルールを指定していますか? コンポーネントが<style>ブロックを使用する場合、これを処理する方法を webpack に伝える必要があります。

ファイルのルールを指定すると、ファイル内のブロックに.cssも同じルールが適用されます。これがないと、webpack はブロックを解析する方法を知りません。<style>.vue

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 に答える