Vue打包后JS文件夹中出现一些map文件的解决方法(map.js文件移除掉

最新推荐文章于 2024-05-13 17:15:40 发布
最新推荐文章于 2024-05-13 17:15:40 发布
阅读量2k 收藏 1
点赞数 2
分类专栏： JavaScript 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43738802/article/details/116453253
版权

Vue打包后JS文件夹中出现一些map文件的解决方法(map.js文件移除掉)

  • 1.在项目下进入目录：项目包/config/index.js
    找到productionSourceMap
 /*
   Source Maps
   */
    productionSourceMap: true,  // 把这边的true改为false
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

productionSourceMap: true, // 把这边的true改为false

前端小c
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue项目打包编译优化方案
10-14
在 vue-cli 3.x 及以上版本，可以在 `vue.config.js` 中设置 `productionSourceMap: false`，以禁止生成 .map 文件。 2. **按需引入第三方包**： 大多数的第三方库如 Element-UI 提供了按需引入的功能。通过使用 `...
去除：Vue项目打包后生成的.map文件&文件hash值命名
michiko98的博客
03-21 1392
文件中设置productionSourceMap和filenameHashing项为false即可。
去除.map文件
公z号：职场爱学习
06-18 3190
.map文件作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。而.map文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 去除掉的原因：打包过后.map文件过大，为了减轻项目的大小。 去除.map的好处是： （1）提升 build速度， （2）深度保护源码（不轻易被恶意盗取代码） –修改config/index.js文件，默认为true productionSourceMap: false ...
【网络安全】WebPack源码（前端源码）泄露 + jsmap文件还原_webpack还原代码sourcemap
最新发布
2401_84973153的博客
05-13 660
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数网络安全工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年网络安全全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上网络安全知识点！真正的体系化！
vue打包后生成map文件调试
qq_41177135的博客
06-19 1021
vue打包后生成map文件调试
项目打包出来的js文件为什么都带有.map文件
zyhzyh1120的博客
09-20 4179
项目打包出来的js文件为什么都带有.map文件 打包后产生后缀名为.map的文件是由于配置了sourcemap选项生成的， 打包后的文件不容易找到出bug对应的源代码的位置，sourcemap就是来帮我们解决这个问题的， 有了map就可以像未压缩的代码一样，准确的输出是哪一行哪一列有错。 具体配置可以查看官网devtool配置 或者其它的webpack sourcemap 选项多种模式的一些解释 如果想要打包后不生成.map文件要怎么配置呢？ 去config/index.js中改一个参数就行：? prod
Vue打包后JS文件夹中出现一些较大的map文件的解决方法
高先生的猫
09-01 2395
1.在项目下进入目录：项目包/config/index.js 或者vue.config.js 找到productionSourceMap /** * Source Maps */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', 2.将productionSourc...
前端漏洞信息：Vue2.x 项目删除 .js.map 文件
前端技术
12-15 411
编译后不要生成 .js.map 文件，在 vue.config.js 文件中如下配置即可。
详解vue-cli脚手架中webpack配置方法
10-18
3. **Loaders**：Vue CLI 针对 Vue.js 项目已经预设了一些 Loaders，如 `vue-loader` 用于处理 Vue 单文件组件，`babel-loader` 用于 ES6+ 语法转换，`css-loader` 和 `style-loader` 处理 CSS 样式。这些 Loaders ...
vue+esri 山东天地图加载、标注、鼠标移入移除浮层显示隐藏
03-14
VUE+ ESRI 实现山东天地图加载展示， 批量添加标注点； 鼠标移入移除标注点，浮层显示隐藏功能； 点击标注点方法实现； 地图放大缩小、平移事件； 天地图样式 <link rel="stylesheet" href="https://js.arcgis....
深入理解基于vue-cli的webpack打包优化实践及探索
10-16
在现代前端开发中，Vue CLI 是一款非常流行的脚手架工具，它内置了 Webpack 配置，使得开发者可以快速地构建 Vue.js 项目。然而，随着项目的不断扩展，优化 Webpack 打包过程变得至关重要，以提升项目的性能和加载...
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
10-16
在Vue.js应用中，我们经常使用axios库来进行HTTP请求。然而，在某些情况下，尤其是当对同一个接口连续发起请求时，可能会遇到返回数据混乱的问题。这主要是由于网络延迟、请求并发控制等因素导致请求的顺序与预期...
webpack build打包出的 map 文件有什么用，能不能删或者打包不生成map文件？
热门推荐
ruanhongbiao的专栏
08-16 1万+
打包后产生后缀名为.map的文件是由于配置了sourcemap选项生成的，打包后的文件不容易找到出bug对应的源代码的位置，sourcemap就是来帮我们解决这个问题的，有了map就可以像未压缩的代码一样，准确的输出是哪一行哪一列有错。具体配置可以查看官网devtool配置 或者其它的webpack sourcemap 选项多种模式的一些解释 如果想要打包后不生成.map文件要怎么配置呢？ 去...
vue cli3打包后出现.map文件
Xiao_peng117的博客
12-09 2999
vue 脚手架3在打包的时候默认会生成.map文件。用于详细报错，但生产环境是没必要的。所以生产环境关闭，开发环境打开是最好的选择 百度和博客搜了一圈，无非就是告诉你怎么配置config，但是实测并没有什么卵用 解决方法 == 此方法试用vue cli3 == 启动图形化界面，项目目录下输入命令： vue ui 导入项目 如果之前不是vue ui创建的项目，需要手动导入项目（如果不需要...
基于webpack或者rollup打包后的map文件的上传以及删除
qq_51156678的博客
01-15 942
/ 删除map文件log(colors.green(`${name}删除成功!`));log(colors.red(`${name}删除失败!`));});至此，webpack的插件就结束了。基于rollup打包的plugin步骤跟webpack的差不太多，唯一有区别的就是获取map文件的方式以及构建plugin的方式。
Vue打包后JS文件夹中出现一些map文件的解决方法
吴佳强的博客
08-19 2346
1.在项目下进入目录：项目包/config/index.js 找到productionSourceMap /* Source Maps */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', 2.将productionSourceMap的true改为false即可 productionSo
vue打包后生成map文件调试（二）
qq_41177135的博客
06-20 800
vue打包后生成map文件调试（二）
webpack项目build打包之后出现.map后缀文件的作用
wiyon的博客
05-31 1486
build之后占用体积最大的是.map文件， 项目打包之后，代码是经过压缩加密的，如果运行报错是不知道哪里报错的，map文件就是就像未加密的文件，可以准确知道哪一行哪一列报错 解决方法： react：webpack.config.js中的devtool：false vue：config/index.js 中改为 productionSourceMap: false 就不生成map文件 ...
Vue打包后出现map文件的解决方法
kairrys
11-01 378
问题： 可能很多人在做vue项目打包，打包之后js中，会自动生成一些map文件，那我们怎么把它去掉不要呢？ 解决办法：去src/config/index.js中改一个参数： productionSourceMap:false 把这个改为false。不然在最终打包的文件中会出现map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代...
vue2 vue.config.js文件最全配置加每一行配置语句的注释注释
05-25
以下是一个包含注释的最全的 vue.config.js 文件配置： ```javascript module.exports = { // 项目部署的基础路径，配置如：/my-app/，则打包后所有资源路径都会加上这个前缀，可以配置为相对路径"./" publicPath: '/', // 输出文件目录，默认值为'dist'，生产环境构建文件的目录 outputDir: 'dist', // 静态资源目录（js、css、img、fonts），相对于outputDir的路径 assetsDir: 'static', // eslint-loader 是否在保存的时候检查，true为检查，false为不检查 lintOnSave: true, // 是否使用包含运行时编译器的Vue核心的构建 runtimeCompiler: false, // 生产环境sourceMap productionSourceMap: false, // webpack配置 configureWebpack: { // 设置别名 resolve: { alias: { '@': resolve('src') } } }, // vue-loader配置 chainWebpack: config => { // 移除 prefetch 插件 config.plugins.delete('prefetch') // 添加新的svg-sprite-loader处理svgIcon config.module .rule('svgIcon') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() // 修改images loader，添加svg处理 config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) .exclude.add(resolve('src/icons')) .end() // 对vue-cli内部的webpack配置进行更细粒度的修改 // https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md config .when(process.env.NODE_ENV !== 'development', config => { // 生产环境配置 } ) .when(process.env.NODE_ENV === 'development', config => { // 开发环境配置 } ) }, // CSS相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps sourceMap: false, // css预设器配置项 loaderOptions: { // sass-loader配置 sass: { // 全局注入变量和mixin data: ` @import "@/styles/variables.scss"; @import "@/styles/mixin.scss"; ` } }, // 启用 CSS modules for all css / pre-processor files. requireModuleExtension: false }, // 开发服务配置 devServer: { // 端口号 port: 8000, // 启动时自动打开浏览器 open: true, // 反向代理配置 proxy: { '/api': { target: 'http://localhost:3000', pathRewrite: { '^/api': '' } } } }, // 第三方插件配置 pluginOptions: { // ... } } function resolve(dir) { return path.join(__dirname, dir) } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小c

创作不易 谢谢打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值