概述
项目中，我们通常会遇到图片静态资源太大，那么我们怎么来压缩图片体积呢？
方法1：PS或者在线网站进行图片压缩。
推荐网站1
https://tinypng.com/
此网站可以批量压缩图片，当然你一次性压太多，网站也会报错无法压缩成功，没关系，你重新多试几次即可。
而且，你可以反复压很多次，这样可以把图片一直缩小体积。
推荐网站2
https://www.bejson.com/ui/compress_img/
该网站优点是自定义压缩体积，缺点是一次只能压一张图片。
方法2：npm 包形式来进行图片压缩
通过如下命令，安装第三方包
cnpm i image-webpack-loader -D
然后在vue.config.js进行如下配置：
module.exports ={
publicPath:'', //为空，则项目可放在服务器任何位置
css: {
loaderOptions: {
postcss: {
plugins: [
require("postcss-px-to-viewport")({
unitToConvert:"px", //需要转换的单位，默认为"px"
viewportWidth: 1920, //视窗的宽度，对应的是我们设计稿的宽度，一般是750
unitPrecision: 5, //单
最后
以上就是沉默荔枝为你收集整理的vue图片压缩不失真_vue 项目中图片压缩方法小结的全部内容，希望文章能够帮你解决vue图片压缩不失真_vue 项目中图片压缩方法小结所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复