运行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会把这个路径下的所有文件都进行打包,这样无论动态部分怎么变化,只要是正确的路径一定可以找到组件文件。

相关推荐
爱喝水的小周12 分钟前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen021115 分钟前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅19 分钟前
介绍electron
前端·javascript·electron
周胡杰21 分钟前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
315356691322 分钟前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑24 分钟前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue7739 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
断竿散人43 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD1 小时前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟1 小时前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计