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

相关推荐
中微子1 分钟前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z10 分钟前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录18 分钟前
虚拟DOM
前端·vue.js·dom
爱学习的茄子18 分钟前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神19 分钟前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
摆烂为不摆烂23 分钟前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神23 分钟前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵23 分钟前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
合作小小程序员小小店24 分钟前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
202624 分钟前
11. vite打包优化
前端·javascript·vite