1. VSCode
打开TS+Vue3
项目很多地方报错
报错内容
几乎所有文件都会出现未知飘红
error Delete CR prettier/prettier
报错原因
插件冲突,Windows
系统回车换行符与MAC
不一致(所以这个问题Windows
系统才会出现)
解决
-
需要安装
Vue - Official
插件,安装插件对VSCode
版本有要求,版本号建议1.88.1以上,同时如果安装了vetur
插件,需要禁用这个插件 -
针对换行符问题,需要先进行
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
会把这个路径下的所有文件都进行打包,这样无论动态部分怎么变化,只要是正确的路径一定可以找到组件文件。