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

相关推荐
27669582922 分钟前
美团闪购最新版 mtgsig1.2
java·python·node·mtgsig·美团闪购商家端·美团闪购·mtgsig1.1
晓13134 分钟前
前端篇——番外篇 Bootstrap框架
前端·javascript·css·html
黑心的奥利奥5 分钟前
前端项目利用Gitlab CI/CD流水线自动化打包、部署云服务
前端·ci/cd·gitlab
墨菲安全10 分钟前
NPM组件 @ivy-shared-components/iconslibrary 等窃取主机敏感信息
前端·npm·node.js·npm组件投毒·主机敏感信息窃取·恶意npm包
Mintopia1 小时前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia1 小时前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
liliangcsdn1 小时前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero1 小时前
基于vue3完成领域模型架构建设
前端
PanZonghui1 小时前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴1 小时前
教你如何理解useContext加上useReducer
前端·javascript·面试