1. VSCode打開TS+Vue3項(xiàng)目很多地方報(bào)錯(cuò)

報(bào)錯(cuò)內(nèi)容

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

error Delete CR prettier/prettier

報(bào)錯(cuò)原因

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

解決

1. 需要安裝Vue - Official插件，安裝插件對(duì)VSCode版本有要求，版本號(hào)建議1.88.1以上，同時(shí)如果安裝了vetur插件，需要禁用這個(gè)插件

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

   git config --global core.autocrlf false
   

   接下來是刪除項(xiàng)目，重新拉取代碼

2. 引用TS接口報(bào)錯(cuò)

報(bào)錯(cuò)內(nèi)容

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

報(bào)錯(cuò)原因

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

解決

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

3. 運(yùn)行項(xiàng)目報(bào)錯(cuò)

報(bào)錯(cuò)內(nèi)容

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

報(bào)錯(cuò)原因

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

解決

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

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

報(bào)錯(cuò)內(nèi)容

Reached heap limit Allocation failed - avascript heap out of memory

報(bào)錯(cuò)原因

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

解決

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

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

• 自定義設(shè)置

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

  npm install -D increase-memory-limit
  

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

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

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

  npm run fix-memory-limit
  

彩蛋

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

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

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

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

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