Vue報錯 There are multiple modules with names that only differ in casing 的報錯原因和解決辦法


  今天寫項目時,遇到報錯信息如下:

./components/MavonEditor/index.vue?vue&type=script&lang=js& 
(./node_modules/_babel-loader@8.0.6@babel-loader/lib??ref--2-0!./node_modules/_vue-loader@15.7.1@vue-loader/lib??vue-loader-options!./components/MavonEditor/index.vue?vue&type=script&lang=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:\modb-front\modb-front\node_modules\_babel-loader@8.0.6@babel-loader\lib\index.js??ref--2-0!
D:\modb-front\modb-front\node_modules\_vue-loader@15.7.1@vue-loader\lib\index.js??vue-loader-options!
D:\modb-front\modb-front\components\MavonEditor\index.vue?vue&type=script&lang=js& Used by 4 module(s), i. e.

  主要報錯就可以看這條: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,貌似說的是語義錯誤。

  並且提示了報錯的地方:./components/MavonEditor/index.vue

一、問題背景:

  npm啟動報警告WARN:There are multiple modules with names that only differ in casing.                             friendly-errors 18:34:32
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:

  這個警告問題之前也遇到過,就是文件名大小寫的問題。比如我的文件名取的是:topicModal,但是在 import 的時候寫的是:import TopicModal from './TopicModal',這樣就會報這個警告。

  這個在window下是警告,可以正常運行;但是在 Linux 服務器上卻是會報錯,導致運行不了的。

二、詳細解釋:

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.
使用唯一的寫法

  文件系統說的就是nodejs里import文件時的文件系統的行為。

  原因:可能是你的項目文件的父組件文件使用了駝峰式起名的寫法導致報錯

三、問題處理

  經過排查,最后發現問題所在:在引用時,路徑大小寫不對導致的。這種問題就是在window下可以識別,會報警告;但是在linux下就不會只報警告了,而是直接打包錯誤。其中jekins自動部署就會經常遇到這樣的問題,所以我們需要特別注意。

  排查原因:

  1 、在引用組件時,路徑大小寫不對也會造成此報錯,看例子:下面的MavonEditor其實文件里是mavonEditor,因為從前面復制的,所以導致寫成了大寫的。

// 錯誤寫法:
import MavonEditor from '@/components/MavonEditor'

// 正確寫法
import MavonEditor from '@/components/mavonEditor'

  2、在組件使用vuex時,引用vuex大小寫錯誤

// 錯誤寫法
import { mapGetters } from 'Vuex'

// 正確寫法
import { mapGetters } from 'vuex'

  其實在做項目時,多注意下細節就可以避免這種錯誤。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM