运行vue3项目相关报错

1. VSCode打开TS+Vue3项目很多地方报错

报错内容

几乎所有文件都会出现未知飘红

error Delete CR prettier/prettier

报错原因

插件冲突，Windows系统回车换行符与MAC不一致（所以这个问题Windows系统才会出现）

解决

1. 需要安装Vue - Official插件，安装插件对VSCode版本有要求，版本号建议1.88.1以上，同时如果安装了vetur插件，需要禁用这个插件

2. 针对换行符问题，需要先进行git设置，执行下面命令

   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不支持设置环境变量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
  # 然后在当前项目执行
  increase-memory-limit
  

• # 或者局部安装
  npm install -D increase-memory-limit
  # 然后在当前项目执行
  npx increase-memory-limit
  

• 自定义设置

  首先在项目中安装开发依赖

  npm install -D increase-memory-limit
  

  在package.json的scripts中增加(set是windows系统设置环境变量的命令，想要兼容请安装cross-env)

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

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

  npm run fix-memory-limit
  

彩蛋

vue动态生成路由的项目，webpack怎么知道需要打包那些文件

webpack并不知道你的项目是否使用动态路由，它只会把入口文件，以及入口文件中导入的文件，以及导入文件中的导入文件。。。全部进行打包，也就是一定要入口文件，或者被导入使用的文件才会把打包。

但是动态生成路由的项目，并不知道需要导入哪个组件文件，因为导入的路径是动态生成的，只有当后端接口返回对应的权限路由，前端根据接口返回数据才能得到要导入的组件路径，所以前端开发人员都不知道会用到哪一个，webpack怎么可能知道？

但是实际开发动态生成路由的项目并没有遇到找不到对应路由的组件问题（除非你动态生成路径错误），webpack怎么这么厉害的知道要把需要的文件都打包了呢？

实际上是因为代码中有导入组件这个动作（动态生成路由的代码中）例如： import('@/views/' + routeName)，虽然路径需要动态生成，但是动态生成的路径前半部@/views/有了，webpack会把这个路径下的所有文件都进行打包，这样无论动态部分怎么变化，只要是正确的路径一定可以找到组件文件。