有些坑不知道怎么就掉進去,可能一輩子都爬不起來!!!
一、錯誤描述
昨天還好好的,今天早上來從git獲取了一下別人提交的代碼就出錯了!而提交代碼的人 運行一點錯誤都沒有!!!
cya@KQ-101 MINGW64 /e/Source/Repos/ProjectManagement/WebUI (master) //這行是vscode自動顯示的。
$ npm run dev //($ 是自動顯示的,dev是我取的別名)
1)瀏覽器報錯
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
at Module.<anonymous> (BaseClient.js:23)
at Module../node_modules/webpack-dev-server/client/clients/BaseClient.js (BaseClient.js:38)
at __webpack_require__ (bootstrap:767)
at fn (bootstrap:130)
at Module.<anonymous> (SockJSClient.js:73)
at Module../node_modules/webpack-dev-server/client/clients/SockJSClient.js (SockJSClient.js:121)
at __webpack_require__ (bootstrap:767)
at fn (bootstrap:130)
at Object../node_modules/webpack-dev-server/client/socket.js (socket.js:52)
at __webpack_require__ (bootstrap:767)
2)vscode 終端報錯:
eslint 報錯,例如:
Errors:
13 http://eslint.org/docs/rules/no-redeclare
5 http://eslint.org/docs/rules/no-unused-vars
1 http://eslint.org/docs/rules/no-empty
1 http://eslint.org/docs/rules/no-undef
Module Warning (from ./node_modules/eslint-loader/index.js):
✘ http://eslint.org/docs/rules/no-unused-vars 'width' is assigned a value but never used
src\views\dataResource\dataCatalog\index.vue:314:13
const width = catalogListContainer.offsetWidth
大概就是: 請查Ctrl+左鍵,去 eslint看各種文檔 **已經定義或引用,但是從來沒有被使用。
其實根本不是eslint的問題。
3)
二、解決方案: 將大寫 WebUI 改為小寫webui
然后,就好了!!!
相當於: cya@KQ-101 MINGW64 /e/Source/Repos/ProjectManagement/webui (master)
或者:

四、無效的嘗試:
1)根據瀏覽器報錯百度得:
https://www.cnblogs.com/qingqingzou-143/p/7028683.html?utm_source=itdadao&utm_medium=referral
文章說:在webpack打包的時候,可以在js文件中混用require和export。但是不能混用import 以及module.exports 。
但這顯然不符合我的實際,因為我和同事代碼完全相同。
2) 刪除本地代碼,重新重gitee(碼雲)上獲取代碼。最后與同事相同的代碼;
3)node.js 卸載、重裝;最后與同事一個版本;
4) 發現npm文件兩個地方都有,一個是node里自帶的,node卸載時會刪除;另一個在系統盤的npm文件里直接刪除了。最后與同事一個版本;
5)eslint 包單獨卸載,重裝。
6)刪除 node_modules 文件,然后執行 npm install ,重新安裝所有的包文件。
7)懷疑每次npm install 包里面文件版本不同,百度發現 package-lock.json ,發現該配置文件保證了包版本的一致性。
https://www.cnblogs.com/cangqinglang/p/8336754.html
https://www.cnblogs.com/kugeliu/p/9153775.html
8)繼續猜想原因:webpack 問題。
對比瀏覽器報錯代碼,發現編譯后的內容不同!
錯誤的:

多出兩個文件!
(webpack)
(webpack)-dev-server
正確的是:

聯想到:會不會是名稱不一致問題???
三、總結:
解決方式:完全是瞎嘗試。
無法向后端那樣調試鎖定錯誤源頭,作為渺小后端開發人員感到前端知識缺口太大,感到前端框架、包、項目代碼巨大的不可控性。報錯,但錯誤提示語句與錯誤源頭相距十萬八千里!!!
根本原因:沒找到。為什么昨天文件名大寫完全正確,今天卻導致錯誤?
直接原因:昨天還好好的,今天早上來從git獲取了一下別人提交的代碼就出錯了!而且同事也獲取了代碼,但是一點錯誤都沒有!!!