解决Vue3+Ts打包项目时会生成很多的map文件

news2024/11/13 10:43:54

 正常打包会生成.js和.map文件

怎么去解决它呢?

正常来说我们会在vite.config.ts配置我们的项目打包方式,如下:(我这里的target:es2022是为了支持模块中顶层await的使用)

// Vite 配置文件
export default {
  build: {
    // 指定构建输出目录
    outDir: "dist",
    // 使用 "terser" 作为代码压缩工具,适合生产环境
    minify: "terser",
    // 设定 Chunk 大小警告阈值,超过此大小会有警告
    chunkSizeWarningLimit: 1500,
    // 目标 JavaScript 版本
    target: "es2022",
    // Rollup 输出配置
    rollupOptions: {
      output: {
        // 设置 Chunk 文件的输出命名规则
        chunkFileNames: "assets/js/[name]-[hash].js",        
        // 设置入口文件的输出命名规则
        entryFileNames: "assets/js/[name]-[hash].js",
        // 设置静态资源文件的输出命名规则
        assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
        // 手动拆分代码块,将特定模块分配到不同的 Chunk
        manualChunks: {
          vue: ["vue", "vue-router"],      // 将 "vue" 和 "vue-router" 模块分配到名为 "vue" 的 Chunk
          echarts: ["echarts"],            // 将 "echarts" 模块分配到名为 "echarts" 的 Chunk
          lodash: ["lodash"],              // 将 "lodash" 模块分配到名为 "lodash" 的 Chunk
          ElementPlus: ["element-plus"]   // 将 "element-plus" 模块分配到名为 "ElementPlus" 的 Chunk
        }
      }
    },
    // terser 压缩选项配置
    terserOptions: {
      compress: {
        // 删除生产环境中的 console 语句
        drop_console: true,
        // 删除生产环境中的 debugger 语句
        drop_debugger: true
      }
    }
  }
};

一般正常配置如上,打包的最后结果会放在dist文件夹里面,但是项目中会出现很多map文件,解决办法很简单,在package.json文件中添加--noEmit即可解决打包中出现的map文件

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

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

相关文章

海思NVR源码方案:集成ONVIF、GUI、存储与告警的全功能解决方案

海思平台作为中国领先的半导体厂商之一,其3520D芯片凭借高性能、低功耗和广泛的应用性成为了NVR(网络硬盘录像机)解决方案的核心选择。海思平台的NVR方案不仅支持多种编码格式,且兼容多种视频监控协议,特别是在ONVIF&a…

NC 二叉搜索树的第k个节点

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 描述 给定一棵结点…

【python】调用openAI api接口批量处理excel中的文本

调用openAI api接口批量处理文本 主页:github; BLOG:BLOG; 教程:视频 1. project简介 (1)概况 用于在python中调用open AI的API,处理xlsx表格中的自然语言文本。一个专门做dirty work的好帮手 &am…

Linux系统-系统信息网络目录文件的相关命令

1.系统信息和性能查看 查看磁盘的占用情况: df -Th 这是参数连着写。相当于df -T -h df -Th 此命令主要用于监控服务器的磁盘空间,如果空间不够用了,会导致服务器和应用的性能严重下降。这时候要手动清理一些不用的垃圾文件,比…

el-image-pro点击文本也能预览图片,支持下载

背景 element-ui:2.15.14 el-image的预览是没有下载功能的,默认是这样的 且默认是通过点击图片才能预览的,有时候我们显示的是图片名称,那么能不能直接点击图片名称来预览呢? 现在想在预览的时候,给它加一…

探秘陆生生态秘境:eDNA视角下的多营养级物种世界

现今的生物多样性和气候危机迫使我们开发更有效的陆地生态系统监测工具,eDNA宏条形码技术(eDNA metabarcoding),能够非侵入性地调查许多生态系统的物种丰富度,不会对生态环境造成干扰。通过分析这些信息,我…

树莓派开发笔记06-树莓派的SPI控制(点亮0.96OLED)

实验说明 我们这里会使用SPI去驱动一个0.96的OLED,首先需要打开SPI sudo raspi-config Interfacing Options------>SPI------>Yes------->OK------->finsh然后将屏幕接到树莓派上,接mosi和sclk的脚,DC接28,RST接29&…

C语言 ——— 学习并使用malloc和free函数

目录 malloc函数的功能 学习malloc函数​编辑 使用malloc函数 free函数的功能 学习并使用free函数​编辑 malloc动态开辟10个整型空间后赋值为0-9,再打印,打印后free malloc函数的功能 malloc函数能向内存申请一块连续可用的空间,并返…

模拟信号-放大器

放大器 放大器的输出信号是直流源和信号源经过放大器后,共同的作用,缺一不可。 直流参数 与放大器中电压源部分有关的参数,即放大器的直流参数。 采用直流电压源供电,电源电压是恒定的,但是电压源的输出电流是变化…

什么是OV SSL证书?如何申请

什么是OVSSL证书 OVSSL证书,全称是Organization Validation SSL Certificate,即组织验证型SSL证书。这是一种高级的SSL证书类型,用于保护网站和应用程序的安全性,特别是在电子商务和企业级网站中广泛应用。OVSSL证书不仅加密网站…

Linux:进程替换

什么是进程替换? 我们的可执行程序,在运行起来的时候就上一个进程 一个进程就会有他的内核数据结构代码和数据 把一个已经成型的进程的代码和数据替换掉,这就叫进程替换 也就是可以通过系统调用把当前进程替换位我们需要的进程 那么替换…

正点原子linux开发板 qt程序交叉编译执行

1.开发板光盘 A-基础资料->5、开发工具->1、交叉编译器->fsl-imx-x11-glibc-x86_64-meta-toolchain-qt5-cortexa7hf-neon-toolchain-4.1.15-2.1.0.sh 拷贝到 Ubuntu 虚拟机 用文件传输系统或者共享文件夹传输到linux虚拟机 用ls -l查看权限,如果是白色的使…

【银河麒麟高级服务器操作系统】实际案例分析,xfsaild占用过高

了解银河麒麟操作系统更多全新产品,请点击访问麒麟软件产品专区:https://product.kylinos.cn 服务器环境及配置 物理机/虚拟机 物理机 处理器: Intel(R) Xeon(R) Silver 4110 CPU 2.10GHz 内存: 65536 MiB (64 GiB) 主板…

HTML5简洁的通用网站模板源码

文章目录 1.设计来源1.1 主界面1.2 模板页面11.3 模板页面21.4 模板页面31.5 模板页面41.6 模板页面5 2.效果和源码2.1 动态效果2.2 源码目录2.3 源代码 源码下载 作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/1413235…

【AD24报错】GND contains IO Pin and Power Pin objects 的解决方案

【AD24报错】GND contains IO Pin and Power Pin objects 的解决方案 在原理图设计过程中,在元器件接线引脚位置出现红色波浪线,显示错误GND contains IO Pin and Power Pin objects。 点击错误信息可以直接跳转到相关位置。 经查明,是在元…

【FPGA数字信号处理】- 数字信号处理如何入门?

​数字信号处理(Digital Signal Processing,简称DSP)是一种利用计算机或专用数字硬件对信号进行处理的技术,在通信、音频、视频、雷达等领域发挥着越来越重要的作用,也是FPGA主要应用领域之一。 本文将详细介绍数字信…

高德地图数据采集器|高德地图数据采集软件_一键导出表格

南斗地图数据采集是一款专业采集百度地图、360地图、高德地图、腾讯地图、必应、google、公司、店铺的手机、座机、地址、坐标等数据信息的软件,它与同类软件相比最显著特点是采集地图更专业、采集速度更快、采集更精准、操作方法更简单。 可以导出地图搜索结果数据…

运维学习————Linux环境下Tomcat的部署

目录 一、环境准备 二、 启动测试 三、访问端口修改 四、部署web项目 1、材料准备 2、部署 2.1、上传war包到webapps目录下 2.2、修改项目配置 2.3、浏览器访问 引申 一、环境准备 tomcat安装包:apache-tomcat-9.0.52 JDK环境: 我使用的y…

【TCP】连接管理:三次握手和四次挥手

连接管理 建立连接:三次握手断开连接:四次挥手 网络中的握手/挥手,就是发送不携带业务数据(没有载荷,只有报头)的数据包,但是能起到“打招呼”这样的效果。次数就是指网络通信的次数。 建立连…

【数学分析笔记】第2章第2节数列极限(3)

2. 数列极限 2.2 数列极限 2.2.5 数列极限的性质 保序性&#xff1a;【定理2.2.3】 { x n } , { y n } , lim ⁡ n → ∞ x n a , lim ⁡ n → ∞ y n b , a < b \{x_{n}\},\{y_{n}\},\lim\limits_{n\to\infty}x_{n}a,\lim\limits_{n\to\infty}y_{n}b,a<b {xn​},{yn…