vue图片压缩不失真_vue 项目中图片压缩方法小结

项目中，我们通常会遇到图片静态资源太大，那么我们怎么来压缩图片体积呢？

方法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, //单