Vueエラー:大文字と小文字が異なるだけの名前のモジュールが複数あります。



Vue Error There Are Multiple Modules With Names That Only Differ Casing



今日プロジェクトを書いているときに、次のようなエラーメッセージが表示されました。

WARNING in ./node_modules/Vuex/dist/vuex.esm.js There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal casing. Compare these module identifiers: * D:workpayment ode_modulesVuexdistvuex.esm.js Used by 1 module(s), i. e. D:workpayment ode_modulesabel-loaderlibindex.js!D:workpayment ode_modulesvue-loaderlibselector.js?type=script&index=0!D:workpayment srccomponentssharedfooter.vue * D:workpayment ode_modulesvuexdistvuex.esm.js Used by 2 module(s), i. e. D:workpayment ode_modulesabel-loaderlibindex.js!D:workpaymentsrcmain.js @ ./node_modules/Vuex/dist/vuex.esm.js @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/shared/footer.vue @ ./src/components/shared/footer.vue @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/account-settings/setMeal.vue @ ./src/components/account-settings/setMeal.vue @ ./src/router/index.js @ ./src/main.js

何度もトラブルシューティングを行い、オンライン記事を参照した後、ようやく問題が見つかりました。
トラブルシューティングの理由:
1コンポーネントが参照されている場合、このエラーによって間違ったパスも発生します。例を参照してください。
進入禁止:



import Footer from '../components/Shared/footer.vue'

正しい書き方:

import Footer from '../components/shared/footer.vue'

2、コンポーネントがvuexを使用する場合、参照vuexケースエラー
進入禁止:



import { mapState} from 'Vuex'

正しい書き方:

import { mapState} from 'vuex'

実際、プロジェクトを行うときは、この種の間違いを避けるために細部にもっと注意を払ってください。今日、この小さなエラーのために、問題は長い間チェックされてきました。最後に、問題を見つけてメモしました。