1. VSCode打開TS+Vue3項目很多地方報錯

報錯內(nèi)容

幾乎所有文件都會出現(xiàn)未知飄紅

error Delete CR prettier/prettier

報錯原因

插件沖突，Windows系統(tǒng)回車換行符與MAC不一致（所以這個問題Windows系統(tǒng)才會出現(xiàn)）

解決

1. 需要安裝Vue - Official插件，安裝插件對VSCode版本有要求，版本號建議1.88.1以上，同時如果安裝了vetur插件，需要禁用這個插件

2. 針對換行符問題，需要先進(jìn)行git設(shè)置，執(zhí)行下面命令

   git config --global core.autocrlf false
   

   接下來是刪除項目，重新拉取代碼

2. 引用TS接口報錯

報錯內(nèi)容

模塊 ""*.vue"" 沒有導(dǎo)出的成員 "FormType"。你是想改用 "import FormType from "*.vue"" 嗎?ts-plugin(2614)

報錯原因

FormType是在.vue文件中通過export導(dǎo)出的TS接口，報錯內(nèi)容是說沒有導(dǎo)出成員

解決

把TS接口放到.ts文件中導(dǎo)出使用

3. 運(yùn)行項目報錯

報錯內(nèi)容

node: --openssl-legacy-provider is not allowed in NODE_OPTIONS

報錯原因

node不支持設(shè)置環(huán)境變量openssl-legacy-provider

解決

出現(xiàn)這個問題需要將node升級到18以上，如果你沒有使用nvm進(jìn)行node版本管理，強(qiáng)烈建議安裝nvm

4. 項目運(yùn)行中自己退出

報錯內(nèi)容

Reached heap limit Allocation failed - avascript heap out of memory

報錯原因

node運(yùn)行內(nèi)存不足

解決

• # 全局安裝
  npm install -g increase-memory-limit
  # 然后在當(dāng)前項目執(zhí)行
  increase-memory-limit
  

• # 或者局部安裝
  npm install -D increase-memory-limit
  # 然后在當(dāng)前項目執(zhí)行
  npx increase-memory-limit
  

• 自定義設(shè)置

  首先在項目中安裝開發(fā)依賴

  npm install -D increase-memory-limit
  

  在package.json的scripts中增加(set是windows系統(tǒng)設(shè)置環(huán)境變量的命令，想要兼容請安裝cross-env)

  "fix-memory-limit": "set LIMIT=5120 increase-memory-limit"
  

  最后運(yùn)行配置的fix-memory-limit

  npm run fix-memory-limit
  

彩蛋

vue動態(tài)生成路由的項目，webpack怎么知道需要打包那些文件

webpack并不知道你的項目是否使用動態(tài)路由，它只會把入口文件，以及入口文件中導(dǎo)入的文件，以及導(dǎo)入文件中的導(dǎo)入文件。。。全部進(jìn)行打包，也就是一定要入口文件，或者被導(dǎo)入使用的文件才會把打包。

但是動態(tài)生成路由的項目，并不知道需要導(dǎo)入哪個組件文件，因為導(dǎo)入的路徑是動態(tài)生成的，只有當(dāng)后端接口返回對應(yīng)的權(quán)限路由，前端根據(jù)接口返回數(shù)據(jù)才能得到要導(dǎo)入的組件路徑，所以前端開發(fā)人員都不知道會用到哪一個，webpack怎么可能知道？

但是實際開發(fā)動態(tài)生成路由的項目并沒有遇到找不到對應(yīng)路由的組件問題（除非你動態(tài)生成路徑錯誤），webpack怎么這么厲害的知道要把需要的文件都打包了呢？

實際上是因為代碼中有導(dǎo)入組件這個動作（動態(tài)生成路由的代碼中）例如： import('@/views/' + routeName)，雖然路徑需要動態(tài)生成，但是動態(tài)生成的路徑前半部@/views/有了，webpack會把這個路徑下的所有文件都進(jìn)行打包，這樣無論動態(tài)部分怎么變化，只要是正確的路徑一定可以找到組件文件。