运行vue3项目相关报错

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

报错内容

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

error Delete CR prettier/prettier

报错原因

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

解决

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

  2. 针对换行符问题,需要先进行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.jsonscripts中增加(setwindows系统设置环境变量的命令,想要兼容请安装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会把这个路径下的所有文件都进行打包,这样无论动态部分怎么变化,只要是正确的路径一定可以找到组件文件。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/29063.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java的Filter(过滤器),Interceptor(拦截器) 和 Aspect(切面)

文章目录 前言一、过滤器 (Filter) 基本用法二、拦截器 (Interceptor) 基本用法三、Aspect(切面)的基本用法总结 前言 Filter 是servlet层面的,由Servlet容器(如Tomcat)支持,只能在web程序中使用,实现了javax.servlet.Filter接口 Intercept…

NATAPP-内网穿透工具----下载与配置

NATAPP-内网穿透工具 基于ngrok的国内高速内网穿透服务,natapp提供了一种便利的方式,使得开发和测试过程更加高效,尤其是在需要进行远程调试或展示时。无论是进行web开发、微信和支付宝的本地开发调试,还是简单地从外部网络访问家…

Maya 2024 mac/win版:创意无界,设计新生

Maya 2024是一款由Autodesk推出的业界领先的三维计算机图形软件,广泛应用于电影、游戏、广告等创意产业。这款软件以其强大的功能和卓越的性能,为艺术家们提供了一个实现创意梦想的平台。 Maya 2024 mac/win版获取 在建模方面,Maya 2024提供…

作者推荐 | 探索分析从起源到现今的巅峰之旅(MySQL存储模型)

探索分析从起源到现今的巅峰之旅 背景介绍MySQL内部组织与结构MySQL的数据层次和关系InnoDB的数据存储模型数据记录的基本单元 — 行页目录(Page Directory)文件头(File Header)决定页面间的关联方式数据页头(Page Hea…

大模型应用开发技术:Multi-Agent框架流程、源码及案例实战(一)

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (一) 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (二) 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (三) 基于 LlaMA…

QT:QT中的默认代码 QT 创建控件的两种方式

目录 QT中的默认代码 新项目的结构 主函数 wiget类的声明文件.h wiget类的定义文件.cpp form file界面文件 .pro文件 QT 创建控件的两种方式 通过ui界面创建控件 通过代码方式创建控件 QT中的默认代码 新项目的结构 主函数 基本概念:Qt 在创建的一个 Wi…

AI在线创作歌曲智能绘画对话三合一源码系统 前后端分离 带完整的安装代码包以及搭建教程

系统概述 在数字化时代背景下,艺术与技术的融合正以前所未有的速度推进,催生出一系列创新应用。为了满足创作者对多元化、高效能创作工具的需求,我们自豪地推出了“AI在线创作歌曲、智能绘画对话三合一源码系统”。这一系统不仅实现了音乐、…

白酒:茅台镇白酒的消费者教育计划与推广活动

云仓酒庄豪迈白酒,作为茅台镇的品牌,一直以来都非常重视消费者教育和推广活动。这些计划和活动的目的在于提高消费者对豪迈白酒的认知度和接受度,同时培养消费者的品鉴能力和酒文化素养。 首先,云仓酒庄豪迈白酒通过开展品鉴活动来…

独立游戏之路:Tap篇 -- Unity 集成 TapTap 广告详细步骤

Unity 集成 TapADN 广告详细步骤 前言一、TapTap 广告介绍二、集成 TapTap 广告的步骤2.1 进入广告后台2.2 创建广告计划2.3 选择广告类型三、代码集成3.1 下载SDK3.2 工程配置3.3 源码分享四、常见问题4.1 有展现量没有预估收益 /eCPM 波动大?4.2 新建正式媒体找不到预约游戏…

六西格玛培训:一次学习,终身受益!

六西格玛培训,这个听起来就充满智慧的名字,其实是一种追求卓越的管理哲学。它的核心理念在于减少缺陷、降低变异,以提升企业的运营效率和质量水平。对于我们这些渴望在职场中更上一层楼的人来说,六西格玛培训无疑是一把打开成功之…

太速科技-基于XCVU9P+ C6678的100G光纤的加速卡

基于XCVU9P C6678的100G光纤的加速卡 一、板卡概述 二、技术指标 • 板卡为自定义结构,板卡大小332mmx260mm; • FPGA采用Xilinx Virtex UltralSCALE 系列芯片 XCVU9P; • FPGA挂载4组FMC HPC 连接器; • 板载4路QSPF,每路数据速…

硕思闪客精灵软件最新版下载及详细安装教程

闪客精灵(Sothink SWF Decompiler)是一款先进的SWF反编译软件,它不但能捕捉、反编译、查看和提取Shock Wave Flash影片(.swf和.exe格式文件),而且可以将SWF格式文件转化为FLA格式文件。 安 装 包 获 取 地 …

Python Django 实现教师、学生双端登录管理系统

文章目录 Python Django 实现教师、学生双端登录管理系统引言Django框架简介环境准备模型设计用户认证视图和模板URL路由前端设计测试和部署获取开源项目参考 Python Django 实现教师、学生双端登录管理系统 引言 在当今的教育环境中,数字化管理系统已成为必不可少…

C# 通过Win32API设置客户端系统时间

在日常工作中,有时可能会需要获取或修改客户端电脑的系统时间,比如软件设置了Licence有效期,预计2024-06-01 00:00:00到期,如果客户手动修改了客户端电脑时间,往前调整了一年,则软件就可以继续使用一年&…

掌控未来:用决策树算法揭秘胜利者的必胜策略!

掌控未来:用决策树算法揭秘胜利者的必胜策略! 一、引言1.1. 决策树的定义1.2. 发展历程1.3. 当前应用概况1.4. 本文内容安排 二、决策树的基本概念2.1 节点和叶节点2.2 决策树的结构结构图示不同结构的决策树 三、决策树的算法原理3.1 基本思想3.2 核心算…

Linux系统部署Samba服务,共享文件夹给Windows

Samba服务是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成。 Samba服务是连接Linux与Windows的桥梁,它通过实现SMB(Server Message Block)协议来允许跨平台的文件和打印机共享。该服务不仅支持Linux和…

Linux操作系统以及一些操作命令、安装教程

Web课程完结啦,这是Web第一天的课程大家有兴趣可以传送过去学习 http://t.csdnimg.cn/K547r Linux-Day01 课程内容 Linux简介 Linux安装 Linux常用命令 1. 前言 1.1 什么是Linux Linux是一套免费使用和自由传播的操作系统。说到操作系统,大家比…

高考没考好焦虑怎么选计算机专业!一篇告诉你,推荐三个风口专业!想学计算机怎么选大学专业

高考成绩揭晓,几家欢喜几家愁。对于那些未能如愿考取理想分数的同学来说,未来似乎蒙上了一层阴影。尤其是在计算机专业如此热门的今天,低分考生是否还有机会在这个领域找到一席之地?本文将为你揭秘,即使高考成绩不理想…

Drake 机器人仿真

sudo apt-get install,pip3 install,sudo apt install这些命令是在Linux系统中用于安装软件包或Python库的不同方法,它们分别属于不同的包管理系统和工具。 sudo apt-get install: 这是在Debian、Ubuntu等基于Debian的系统上用于从…

mysql [Err] 1118 - Row size too large (> 8126).

1.找到my.ini文件 1.1 控制台输入以下指令,打开服务 services.msc1.2 查看mysql服务的属性 2.停止mysql服务,修改my.ini文件并且保存 innodb_strict_mode03.重启mysql服务 4.验证是否关闭成功 show variables like %innodb_strict_mode%; show vari…