www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

Vue打包后出现一些map文件的解决方法,使用vue打

2019-05-31 03:17 来源:未知

Vue打包后出现一些map文件的解决办法:

Vue打包后出现一些map文件的解决方法,vuemap

Vue打包后出现一些map文件的解决办法:

问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢?

1,运行  cnpm run build  开始打包

2,会在项目目录下自动创建dist目录,打包好的文件都在其中

解决办法:去src/config/index.js中改一个参数:

productionSourceMap:false

把这个改为false。不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。

有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。

最后你在build之后,然后就会发现就没有自动生成一些map文件了。。。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会...

第一次使用vue2.0开发,之前都是用的angular1.x。在使用vue-cli脚手架打包后(UI用的Element-ui),发现vendor文件很大,将近1M左右。。后来翻阅资料才明白,原来webpack把所有的库都打包到了一起,导致文件很大。

问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢?

我的解决办法:

1,运行  cnpm run build  开始打包

  1、把不常改变的库放到index.html中,通过cdn引入,比如下面这样:

2,会在项目目录下自动创建dist目录,打包好的文件都在其中

图片 1

解决办法:去src/config/index.js中改一个参数:

然后找到build/webpack.base.conf.js文件,在 module.exports = { } 中添加以下代码

productionSourceMap:false

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'element-ui': 'ELEMENT',
 },

把这个改为false。不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。

这样webpack就不会把vue.js, vue-router, element-ui库打包了。声明一下,我把main.js中对element的引入删掉了,不然我发现打包后的app.css还是会把element的css打包进去,删掉后就没了。

有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。

然后你打包就会发现vendor文件小了很多~

最后你在build之后,然后就会发现就没有自动生成一些map文件了。。。

如果你还不满足,请接着往下看·····

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

2、vue路由的懒加载(具体作用,官网查看哦,这里就不多介绍了)。

您可能感兴趣的文章:

  • Vue.js中用webpack合并打包多个组件并实现按需加载
  • 详解如何使用webpack打包Vue工程
  • vue打包后显示空白正确处理方法
  • Vue项目webpack打包部署到服务器的实例详解
  • Vue 中批量下载文件并打包的示例代码
  • Parcel.js Vue 2.x 极速零配置打包体验教程
  • 关于Vue背景图打包之后访问路径错误问题的解决
  • vue 打包后的文件部署到express服务器上的方法
  • 详解vue静态资源打包中的坑与解决方案
  • vue.js打包之后可能会遇到的坑!

刚开始我们使用路由可能是下面这样(router.js),这样一开始进入页面就会把所有的路由资源都加载,如果项目大,加载的内容就会很多,等待的时间页就会越长,导致给用户的不好的体验效果。

图片 2

为了把路由分模块,然后每次进入一个新页面才加载该页面所需要的资源(也就是异步加载路由),我们可以像下面这样使用(router.js):

图片 3

然后你打包就会发现,多了很多1.xxxxx.js;2.xxxxx.js等等,而vendor.xxx.js没了,剩下app.js 和manifest.js,而且app.js还很小,我这里是100k多一点。

图片 4

这里我没有生成map文件,这样打包速度快一些,整个项目文件也小很多(map文件一般都很大);

取消生成map文件,找到config/index.js ,修改下面箭头指向为false,就行了。

图片 5

刚开始使用,一路磕磕碰碰在所难免,也借鉴了很多前辈们的经验,所以在这里记录一下,希望能帮到更多的人。

总结

以上所述是小编给大家介绍的使用vue打包时vendor文件过大或者是app.js文件很大的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
  • 详解vue静态资源打包中的坑与解决方案
  • Vue 中批量下载文件并打包的示例代码
  • 关于Vue背景图打包之后访问路径错误问题的解决
  • vue打包后显示空白正确处理方法
  • vue-cli中打包图片路径错误的解决方法
  • vue 打包后的文件部署到express服务器上的方法
TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:Vue打包后出现一些map文件的解决方法,使用vue打