Vue项目打包常见问题

vue的前端项目中,有时候需要多个不同项目合并到一起。有时候有一些特殊要求。

1、打包后不允许生成带 .map的文件

正常使用npm run build命令打包生成的dist文件中,js文件总会生成一个同名的.map文件,原因如下:

总结‌:Vue项目生成.map文件是Webpack为支持源码级调试而设计的默认行为,需权衡调试需求与安全/性能因素后,通过配置决定是否保留。

控制生成策略:通过配置vue.config.js中的productionSourceMap: false可完全禁用.map文件生成。该设置会关闭Webpack的Source Map生成逻辑,使最终输出仅包含压缩后的业务代码。保留.map文件时建议通过服务器权限设置禁止外部访问。

  1. 源码映射功能
    .map文件是Source Map文件,用于建立压缩后的生产环境代码与原始开发代码的对应关系。当代码经过Webpack打包处理后,所有代码会被压缩、混淆和加密,此时.map文件可帮助将错误定位到原始代码的具体行和列。

  2. 调试支持强化
    开发阶段生成的.map文件能让浏览器开发者工具展示未压缩前的源码结构,支持断点调试和变量跟踪。生产环境保留.map文件可辅助远程错误诊断,但存在源码泄露风险。

  3. 构建工具默认行为
    Vue CLI默认在生产构建时启用productionSourceMap选项(值为true),导致Webpack自动生成.map文件。该配置继承自Webpack的devtool设定,针对不同环境生成不同类型的Source Map。

  4. 文件体积与安全影响
    .map文件通常占打包体积的50%以上,可能影响加载性能。同时,攻击者可通过工具(如reverse-sourcemap)利用.map文件反编译出项目源码,引发安全风险。

解决:在vue.config.js文件中,增加节点:

 configureWebpack:config => {config.devtool=config.mode==='production'?false:'source-map';},

2、打包后config.js命名冲突

解决:直接将文件重命名

在引用的index.html中将引用配置文件重命名,在代码中,将config.js,重命名

3、打包手的文件中,不允许xx.xx.js的文件(即文件名不能出现多个.)

解决:在vue.config.js文件中,增加节点:

 filenameHashing: false,configureWebpack: {output: {filename: '[name].js',chunkFilename: '[name].js',},

4、打包后app.js命名冲突

解决:在上述配置中,将文件添加前缀或后缀

filenameHashing: false,configureWebpack: {output: {filename: 'js/ss_[name].js',chunkFilename: 'js/[name].js',},

注:也可以将1、4两项配置合并:

 filenameHashing: false,configureWebpack: {output: {filename: 'js/ss_[name].js',chunkFilename: 'js/[name].js',},devtool:process.env.NODE_ENV==='production'?false:'source-map'},

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

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

相关文章

Linux 学习-模拟实现【简易版bash】

1、bash本质 在模拟实现前,先得了解 bash 的本质 bash 也是一个进程,并且是不断运行中的进程 证明:常显示的命令输入提示符就是 bash 不断打印输出的结果 输入指令后,bash 会创建子进程,并进行程序替换 证明&#x…

GitHub 趋势日报 (2025年05月31日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 1153 prompt-eng-interactive-tutorial 509 BillionMail 435 ai-agents-for-begin…

“人单酬“理念:财税行业的自我驱动革命

引言:当薪酬不再是"固定数字",而是"成长标尺" "为什么有人拼命工作却收入停滞?为什么企业总在人才流失中挣扎?"这些问题背后,往往隐藏着传统薪酬体系的僵化。而"人单酬"&…

AI大模型赋能,aPaaS+iPaaS构建新一代数智化应用|爱分析报告

01 aPaaS和iPaaS成为企业用户关注重点 PaaS市场定义 根据Gartner的定义,PaaS(Platform as a Service)平台是应用基础架构(中间件)服务的广泛集合, 包含应用平台、集成、业务流程管理、数据服务和AI应用等…

WPS快速排版

论文包括(按顺序):封面(含题目)、摘 要、关键词、Abstract(英文摘要)、Keywords、目录、正文、参考文献、在读期间发表的学术论文及研究成果,致 谢 题目(黑小一加粗&…

python第39天打卡

1.灰度图像 作为图像数据,相较于结构化数据(表格数据)他的特点在于他每个样本的的形状并不是(特征数,),而是(宽,高,通道数) # 先继续之前的代码 import torch import torch.nn as nn import t…

win11小组件功能缺失的恢复方法

问题说明:重置了win11系统,结果小组件功能找不到了,最后用以下办法解决。 1. 以管理员身份打开 PowerShell 或 CMD。 2. 运行以下命令: winget install 9MSSGKG348SP 注:如果报错,可尝试先卸载再安装…

Kali Linux从入门到实战:系统详解与工具指南

一、Kali Linux简介 Kali Linux是一款基于Debian的Linux发行版,专为渗透测试和网络安全审计设计,由Offensive Security团队维护。其前身是BackTrack,目前集成了超过600款安全工具,覆盖渗透测试全流程,是网络安全领域…

C语言 — 文件

目录 1.流1.1 流的概念1.2 常见的的流 2.文件的打开和关闭2.1 fopen函数2.2 fclose函数2.3 文件的打开和关闭 3.文件的输入输出函数3.1 fputc函数3.2 fgetc函数3.3 feof函数和ferror函数3.4 fputs函数3.5 fgets函数3.6 fwrite函数3.7 fread函数3.8 fprintf函数3.9 fscanf函数 4…

Pull Request Integration 拉取请求集成

今天我想要把我创建的项目,通过修改yaml里面的内容,让我在main分支下的其他分支拉取请求的时候自动化测试拉取的内容,以及将测试结果上传到控制台云端。 首先我通过修改yaml文件里面的内容 name: Build and Teston:push:branches:- mainjobs:…

NodeJS全栈开发面试题讲解——P3数据库(MySQL / MongoDB / Redis)

3.1 如何用 Node.js 连接 MySQL?你用过哪些 ORM? 面试官您好,我先介绍如何用 Node.js 连接 MySQL,然后补充我常用的 ORM 工具。 🔌 原生连接 MySQL 使用 mysql2 模块: npm install mysql2 const mysql …

Redis最佳实践——性能优化技巧之数据结构选择

Redis在电商应用中的数据结构选择与性能优化技巧 一、电商核心场景与数据结构选型矩阵 应用场景推荐数据结构内存占用读写复杂度典型操作商品详情缓存Hash低O(1)HGETALL, HMSET购物车管理Hash中O(1)HINCRBY, HDEL用户会话管理Hash低O(1)HSETEX, HGET商品分类目录Sorted Set高O…

题单:最大公约数(辗转相除法)

题目描述 所谓 “最大公约数(GCD)” ,是指所有公约数中最大的那个,例如 12 和 1818 的公约数有 1,2,3,6 ,所以 12 和 18 的最大公约数为 6 。 辗转相除法,又名欧几里德算法(Euclidean Algorit…

hadoop完整安装教程(附带jdk1.8+vim+ssh安装)

本篇带领大家在uabntu20虚拟机上安装hadoop,其中还包括jdk1.8、ssh、vim的安装教程,(可能是)史上最全的安装教程!!!若有疑问可以在评论区或者私信作者。建议在虚拟机上观看此博客,便…

Flutter、React Native、Unity 下的 iOS 性能与调试实践:兼容性挑战与应对策略(含 KeyMob 工具经验)

移动端跨平台开发逐渐成为常态,Flutter、React Native、Unity、Hybrid App 等框架在各类 iOS 项目中频繁出现。但随之而来的,是一系列在 iOS 设备上调试难、性能数据采集难、日志整合难的问题。 今天这篇文章,我从实际项目出发,聊…

PyCharm接入DeepSeek,实现高效AI编程

介绍本土AI工具DeepSeek如何结合PyCharm同样实现该功能。 一 DeepSeek API申请 首先进入DeepSeek官网:DeepSeek 官网 接着点击右上角的 “API 开放平台“ 然后点击API keys 创建好的API key,记得复制保存好 二 pycharm 接入deepseek 首先打开PyCh…

Cinnamon开始菜单(1):获取应用数据

看了半天:/usr/share/cinnamon/applets/menucinnamon.org,终于挖到了精髓。 Cinnamon.AppSystem.get_default() 获取系统应用数据 get_tree() 获取树机构 get_root_directory() 获取根目录 iter() 遍历 get_name() 获取名称 get_desktop_file_id()…

git reset --hard HEAD~1与git reset --hard origin/xxx

git reset --hard HEAD~1与git reset --hard origin/xxx git reset --hard origin/xxx有时候会太长,手工输入略微繁琐,可以考虑: git reset --hard HEAD~1 替代。 或者使用这种方式 git reset撤销当前分支所有修改,恢复到最近一…

鸿蒙OSUniApp PWA开发实践:打造跨平台渐进式应用#三方框架 #Uniapp

UniApp PWA开发实践:打造跨平台渐进式应用 前言 在过去的一年里,我们团队一直在探索如何利用UniApp框架开发高性能的PWA应用。特别是随着鸿蒙系统的普及,我们积累了不少有价值的实践经验。本文将分享我们在开发过程中的技术选型、架构设计和…

ansible自动化playbook简单实践

方法一:部分使用ansible 基于现有的nginx配置文件,定制部署nginx软件,将我们的知识进行整合 定制要求: 启动用户:nginx-test,uid是82,系统用户,不能登录 启动端口82 web项目根目录/…