运行vue3项目相关报错

news2024/11/23 15:47:27

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.coloradmin.cn/o/1829798.html

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

相关文章

掌握高等数学、线性代数、概率论所需数学知识及标题建议

在数学的广袤领域中,高等数学、线性代数和概率论作为三大核心分支,不仅在理论研究中占据重要地位,更在实际应用中发挥着举足轻重的作用。为了深入理解和掌握这三门学科,我们需要掌握一系列扎实的数学知识。 高等数学所需数学知识 …

vitepress搭建的博客系统cdn引入github discussions评论系统

github仓库必须是公开的。 按照CDN的方式引入 打开discussions模块 安装giscus app 配置giscus 就是刚安装了giscus app的仓库 页面往下走,生成了代码: 配置vitepress 采用了CDN的方式引入 使用web component 随便找个地方试试组件 效果 有了…

Web3失败下互联网的未来转型之路

互联网的消亡已不再是夸大其词的说法。在大型科技巨头和生成式AI的推动下,网络的死亡螺旋正在加速,就像希腊神话中的蛇怪,象征着自我吞噬与永生。互联网已经开始自我喂养,并吐出最糟糕的部分供我们消费。 没有价值 Web3未能提供…

LeetCode43.字符串相乘【大整数相乘】

LeetCode刷题记录 文章目录 📜题目描述💡解题思路 📜题目描述 给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式。 注意:不能使用任何内置的 Big…

Windows10安装Docker Desktop(实操步骤版)

1,下载Docker Desktop 官网下载地址: https://desktop.docker.com/win/stable/amd64/Docker%20Desktop%20Installer.exe 国内镜像下载地址(本人下载这个): https://smartidedl.blob.core.chinacloudapi.cn/docker/2…

黄仁勋最新建议:找到一门技艺,用一生去完善、磨炼!

“你可能会找到你的英伟达。我希望你们将挫折视为新的机遇。” 黄仁勋职业生涯中最大的教诲并非来自导师或科技公司 CEO,而是来自他在国际旅行时遇到的一位园丁。 近日在加州理工学院毕业典礼上发表演讲时,黄仁勋向毕业生分享了自己在日本京都的小故事。…

windows11 x64 23H2 企业纯净版2024.6.16

闲来无事试安装了下da_nao_yan的 【6月12日更新】Windows11 22631.3737企业版 23H2 自用优化版 (原版地址:https://bbs.pcbeta.com/viewthread-1985546-1-1.html),感觉比原版流畅多了,重新按照自己习惯封装了下&#x…

!力扣105. 从前序与中序遍历序列构造二叉树

给定两个整数数组 preorder 和 inorder ,其中 preorder 是二叉树的先序遍历, inorder 是同一棵树的中序遍历,请构造二叉树并返回其根节点。 示例 1: 输入: preorder [3,9,20,15,7], inorder [9,3,15,20,7] 输出: [3,9,20,null,null,15,7] …

Postgre 调优工具pgBadger部署

一,简介: pgBadger(日志分析器)类似于oracle的AWR报告(基于1小时,一天,一周,一月的报告),以图形化的方式帮助DBA更方便的找到隐含问题。 pgbadger是为了提高…

springboot集成shardingsphere-分库分表

导入maven依赖&#xff0c;如下 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><a…

【模块缝合】【NIPS 2021】MLP-Mixer: An all-MLP Architecture for Vision

文章目录 简介代码&#xff0c;from&#xff1a;https://github.com/huggingface/pytorch-image-models【多看看成熟仓库的代码】MixerBlock paper and code&#xff1a; https://paperswithcode.com/paper/mlp-mixer-an-all-mlp-architecture-for-vision#code 简介 这个转置…

jeecg快速启动(附带本地运行可用版本下载)

版本整理&#xff08;windows x64位&#xff09;&#xff1a; redis&#xff1a;3.0.504 MYSQL&#xff1a;5.7 Maven&#xff1a;3.9.4(setting文件可下载) Nodejs&#xff1a;v16.20.2&#xff08;建议不要安装默认路径下&#xff0c;如已安装在c盘&#xff0c;运行yarn报…

DDei在线设计器-DDeiCore-面板插件

DDei-Core-面板 面板是一个可见的功能界面&#xff0c;既可以装载到布局&#xff08;Layout&#xff09;上&#xff0c;也能够被嵌套进其它面板&#xff0c;这一篇对DDei-Core的提供的主要面板进行介绍&#xff0c;最后以表格的形式列举其它面板。 如需了解详细的API教程以及参…

Java并发编程三大神器之Semaphore

Java并发编程三大神器之Semaphore 1、Semaphore是什么2、Semaphore小试牛刀3、Semaphore和CountDownLatch组合使用4、Semaphore常用方法5、Semaphore 结语 1、Semaphore是什么 Semaphore 是一个计数信号量&#xff0c;是JDK1.5引入的一个并发工具类&#xff0c;位于java.util.…

YOLOv10涨点改进SPPF创新结构,重新设计全局平均池化层和全局最大池化层,增强全局视角信息和不同尺度大小的特征

本文改进:SPPF_improve利用全局平均池化层和全局最大池化层,加入一些全局背景信息和边缘信息,从而获取全局视角信息并减轻不同尺度大小所带来的影响,强烈推荐,适合直接使用,paper创新级。 目录 1,YOLOv10介绍 1.1 C2fUIB介绍 1.2 PSA介绍 1.3 SCDown 2.SPP &SP…

React 中的事件处理

React 中是如何处理事件的&#xff0c;现在下面简单的一段代码&#xff1a; export default function App() {const AList lazy(()>import(./List.js))const r useRef(null) const [show, setShow] useState(false);return (<><button onFocus{()>{setShow…

如何用 ChatGPT DALL-E3绘画(10个案例)

如何用ChatGPT绘画——10个案例&#xff08;附提示词&#xff09; DALL•E 3可以在ChatGPT plus里直接使用了。 如果想免费使用&#xff0c;可以用新必应免费使用。 上次有个朋友问&#xff1a;DALL•E 3 有什么用。 这里用十个案例&#xff0c;来解释一下这个问题。 1.创…

国产MCU芯片(1):航顺芯片MCU概览

前言: 截止2023年底,全国有3451家芯片设计公司,已经IPO的就有168家,尚未IPO的3283家中超过一半的年营收在1000万以下,迅猛发展的几年的确有些国产芯片开始站上赛道,这也是国际大背景下的一种必然选择,毕竟突然间出现的大市场需要国产顶上,但资本市场是周期性的,国产替…

扫地机LiDAR形态之美

石头扫地机V20 LiDAR: Flash光源和Spot光源切换 图来自 Robot森 LiDAR(Light Detection and Ranging,激光雷达)技术在扫地机器人中的应用,不仅提升了机器的智能性和实用性,还展现了一种科技与艺术的融合之美。 一、外观设计的精致性 紧凑与轻巧:扫地机器人的LiDAR传感器…

qt笔记之main.cpp加载qml文件的3种方法QQuickView 、QQmlApplicationEngine、QQuickWidget

qt笔记之main.cpp加载qml文件的3种方法QQuickView 、QQmlApplicationEngine、QQuickWidget —— 2024-06-16 下午 code review! 文章目录 qt笔记之main.cpp加载qml文件的3种方法QQuickView 、QQmlApplicationEngine、QQuickWidget1.使用qtcreator创建qml空项目&#xff0c;默…