运行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.rhkb.cn/news/356785.html

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

相关文章

永磁同步电机FOC调试记录(一)

永磁同步电机FOC调试记录(一) 前言架构硬件架构软件架构 调试过程元器件选型开环控制编码器调试速度采样电流检测中断优先级的确定电流环部分烧坏IPM速度-电流环位置-电流环 结语 前言 这是我个人从零开始尝试永磁同步电机(PMSM)…

【LeetCode刷题】232.用栈实现队列

目录 题目链接 图解思路 整体结构 实现过程 入队列 出队列 实现代码 MyQueue.h MyQueue.c stack.h stack.c test.c 题目链接 232. 用栈实现队列 - 力扣(LeetCode) 图解思路 整体结构 实现过程 入队列 插入数据时,插入到ist。…

尚品汇-(四)

(1)商品的基本知识 1.1基本信息—分类 一般情况可以分为两级或者三级。咱们的项目一共分为三级,即一级分类、二级分类、三级分类。 比如:家用电器是一级分类,电视是二级分类,那么超薄电视就是三级分类。…

《计算机英语》 Unit 5 Networking 网络

Section A Networking 网络 The need to share information and resources among different computers has led to linked computer systems, called networks, in which computers are connected so that data can be transferred from machine to machine. 不同计算机之间共享…

路由器基础配置以及静态路由配置

1、搭建网络 搭建网络拓扑、分配IP地址、划分网段、连接端口 2、配置路由器 路由器基础配置 //进入全局配置模式 Router#enable Router#conf t Enter configuration commands, one per line. End with CNTL/Z.//配置高速同步串口serial2/0 Router(config)#int ser2/0 Route…

Linux-Https协议

文章目录 前言一、Https协议二、常见的加密方式对称加密非对称加密数据摘要&&数据指纹中间人攻击 三、Https的加密历程方案1-只使用对称加密方案2-只使用非对称加密方案3-双方都使用非对称加密方案4-非对称加密对称加密 四、CA证书什么是CA证书CA证书的合法性如何生成.…

学习笔记——路由网络基础——动态路由

五、动态路由 1、动态路由概述 动态路由:通过在设备上运行某种协议,通过该协议自动交互路由信息的过程。 动态路由协议有自己的路由算法,能够自动适应网络拓扑的变化,适用于具有一定数量三“层设备的网络。 动态路由协议适用场…

深入理解redis持久化—AOF日志

redis为什么需要持久化 redis是内存数据库,redis所有的数据都保存在内存中 如果此时pc关机或重启,那么内存中的用户数据岂不是丢失了?redis这么不安全吗? 作为数据库,保证数据的安全,持久是基本需求&…

【Linux】进程间通信3——system V共享内存

1.system V进程间通信 管道通信本质是基于文件的,也就是说操作系统并没有为此做过多的设计工作,而system V IPC是操作系统特地设计的一种通信方式。但是不管怎么样,它们的本质都是一样的,都是在想尽办法让不同的进程看到同一份由操…

idea导入文件里面的子模块maven未识别处理解决办法

1、File → Project Structure → 点击“Modules” → 点击“” → “Import Model” 2、可以看到很多子模块,选择子模块下的 pom.xml 文件导入一个一个点累死了,父目录下也没有pom文件 解决办法:找到子模块中有一个pom.xml文件,…

Redis 主从同步

主从同步 很多企业没有使用Redis的集群,但是至少都做了主从。有了主从,当master挂掉的时候,运维让从库过来接管,服务就可以继续,否则master需要经过数据恢复和重启的过程,可能会拖很长时间,影响…

web-原生Ajax

概念: Asynchronous JavaScript And XML,异步的JavaScript和XML。 作用: 数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如…

MySQL—索引—基础语法

目录 一、创建、查看以及删除索引的语法 (1)创建索引 1、1会用到一个关键字:CREATE。 1、2增加索引还可以用到另外一个关键字——ALTER TABLE 表名 ADD INDEX ... 。 2、解释。 (2)查看索引 1、查看索引需要用到…

FreeCAD中类型机制研究

了解FreeCAD类型机制实现原理,为后续FreeCAD相关工作提供参考。 1.实现原理 FreeCAD系统提供一个最上层的基类BaseClass,该类主要处理类型相关工作,几乎所有的FreeCAD的类直接或间接继承于该类。该类只有唯一个属性Type,Type里面…

kotlin类

一、定义 1、kotlin中使用关键字class 声明类,如果一个类没有类体,也可以省略花括号, 默认为public 类型的: // 这段代码定义了一个公开的、不可被继承的Test类 class Test{} // 没有类体,可以省略花括号 class Test 底层代码&…

【菜狗学前端】uniapp(vue3|微信小程序)实现外卖点餐的左右联动功能

记录,避免之后忘记...... 一、目的:实现左右联动 右->左 滚动(上拉/下拉)右侧,左侧对应品类选中左->右 点击左侧品类,右侧显示对应品类 二、实现右->左 滚动(上拉/下拉)右…

利口 202. 快乐数

力扣 202. 快乐数 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为: 对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1,也可能是 无限循环 但始终变不到 1。如果这个过程 结…

mac如何检测硬盘损坏 常用mac硬盘检测坏道工具推荐

mac有时候也出现一些问题,比如硬盘损坏。硬盘损坏会导致数据丢失、系统崩溃、性能下降等严重的后果,所以及时检测和修复硬盘损坏是非常必要的。那么,mac如何检测硬盘损坏呢?有哪些常用的mac硬盘检测坏道工具呢? 一、m…

57.SAP MII产品介绍(07)功能详解(06)Workbench-SQLQuery

1.SQLQuery概念 您可以使用SAP Manufacturing Integration and Intelligence(SAP MII)Workbench中的SQLQuery来创建访问面向SQL的连接器(如IDBC连接器)的模板。此查询的扩展名为tqsq。 简而言之,SQLQuery就是一段…

嵌入式web 服务器boa的编译和移植

编译环境:虚拟机 ubuntu 18.04 目标开发板:飞凌OKA40i-C开发板, Linux3.10 操作系统 开发板本身已经移植了boa服务器,但是在使用过程中发现POST方法传输大文件时对数据量有限制,超过1M字节就无法传输,这是…