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

報錯內容

幾乎所有文件都會出現未知飄紅

error Delete CR prettier/prettier

報錯原因

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

解決

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

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

   git config --global core.autocrlf false
   

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

2. 引用TS接口報錯

報錯內容

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

報錯原因

FormType是在.vue文件中通過export導出的TS接口，報錯內容是說沒有導出成員

解決

把TS接口放到.ts文件中導出使用

3. 運行項目報錯

報錯內容

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

報錯原因

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

解決

出現這個問題需要將node升級到18以上，如果你沒有使用nvm進行node版本管理，強烈建議安裝nvm

4. 項目運行中自己退出

報錯內容

Reached heap limit Allocation failed - avascript heap out of memory

報錯原因

node運行內存不足

解決

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

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

• 自定義設置

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

  npm install -D increase-memory-limit
  

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

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

  最后運行配置的fix-memory-limit

  npm run fix-memory-limit
  

彩蛋

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

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

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

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

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