脚本宝典收集整理的这篇文章主要介绍了

Vue打包注意事项

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

在使用vue-cli进行项目打包时,发现了一些以前没注意到的点,因此写下此文,记录一下,如果可以对大家有所帮助,那就更好了。
1.直接使用npm run build 打包时,会出现一些以.map结尾的文件

.map文件的作用:由于打包后代码会进行加密,这时如果运行错误,输出的错误信息无法准确得知是哪里的代码报错,而有了这些.map文件当代码出现错误时,可以像未加密时一样,准确的输出错误在那个位置。
原因:vue-cli中默认打包后创建.map文件,以提醒开发人员错误位置。
解决方式:
    ![图片描述][1]
    打开项目根目录下的/config/index.js文件,找到 productionSourceMap: true, 将这个参数改为false即可。
建议:
    一般情况下,项目都是经过测试完之后才上线,代码基本上不会有什么问题,所以这时报错提示基本上没有什么用,反而会占一定的体积,因此可以将它删除。

2.打包之后出现页面渲染不出来的情况

 原因:打开控制台后看见报错信息显示是路径找不到,原因是vue-cli打包默认情况下使用的是绝对路径,将其打包后的路径改为相对路径即可
 解决方式:
     ![图片描述][2]
     打开项目根目录下的/config/index.js文件,找到 assetsPublicPath: '/'这个参数,将其修改为  './'即可。

3.在代码中引入图片时,使用相对路径,这样可以避免出现打包后图片出不来的情况。


以上就是我在进行Vue打包时的一些收获,如果大家觉得有哪些不足之处,可以指出,我一定将其改正。

总结

以上是脚本宝典为你收集整理的

Vue打包注意事项

全部内容,希望文章能够帮你解决

Vue打包注意事项

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过