运行vue3项目相关报错

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

报错内容

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

bash 复制代码
error Delete CR prettier/prettier

报错原因

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

解决

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

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

    bash 复制代码
    git config --global core.autocrlf false

    接下来是删除项目,重新拉取代码

2. 引用TS接口报错

报错内容

模块 ""*.vue"" 没有导出的成员 "FormType"。你是想改用 "import FormType from "*.vue"" 吗?ts-plugin(2614)

报错原因

FormType是在.vue文件中通过export导出的TS接口,报错内容是说没有导出成员

解决

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

3. 运行项目报错

报错内容

bash 复制代码
node: --openssl-legacy-provider is not allowed in NODE_OPTIONS

报错原因

node不支持设置环境变量openssl-legacy-provider

解决

出现这个问题需要将node升级到18以上,如果你没有使用nvm进行node版本管理,强烈建议安装nvm

4. 项目运行中自己退出

报错内容

bash 复制代码
Reached heap limit Allocation failed - avascript heap out of memory

报错原因

node运行内存不足

解决
bash 复制代码
# 全局安装
npm install -g increase-memory-limit
# 然后在当前项目执行
increase-memory-limit
bash 复制代码
# 或者局部安装
npm install -D increase-memory-limit
# 然后在当前项目执行
npx increase-memory-limit
  • 自定义设置

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

    bash 复制代码
    npm install -D increase-memory-limit

    package.jsonscripts中增加(setwindows系统设置环境变量的命令,想要兼容请安装cross-env)

    json 复制代码
    "fix-memory-limit": "set LIMIT=5120 increase-memory-limit"

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

    bash 复制代码
    npm run fix-memory-limit

彩蛋

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

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

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

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

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

相关推荐
学不会•23 分钟前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年5 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder5 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727575 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架