图⽚压缩会在⼀定程度上影响图⽚的质量，使⽤时根据具体场景选择是否使⽤。

安装

需要使⽤ image-webpack-loader ⾸先进⾏安装： npm install image-webpack-loader -D 注意： 由于此 loader 内部依赖的⽂件并未全部处于 npm 中，所以安装此 loader 时可能出现失败的情况。 参考链接：https://gitee.com/lagoufed/fed-e-questions/blob/master/part2/ 需要在安装前进⾏以下配置： 1. 修改 hosts，添加以下内容 # windows 系统下 hosts ⽂件位置：C:\Windows\System32\drivers\etc\hosts # GitHub Start ================================================== =============== 52.74.223.119 github.com 192.30.255.116 api.github.com 140.82.112.25 live.github.com 8.7.198.45 gist.github.com 192.0.66.2 github.blog 185.199.108.154 github.githubassets.com 50.17.56.103collector.githubapp.com 52.217.67.172 github-cloud.s3.amazonaws.com 140.82.114.22 central.github.com 199.232.96.133 raw.githubusercontent.com 199.232.96.133 user-images.githubusercontent.com 199.232.96.133 desktop.githubusercontent.com 199.232.96.133 camo.githubusercontent.com 199.232.96.133 avatars.githubusercontent.com 199.232.96.133 avatars0.githubusercontent.com 199.232.96.133 avatars1.githubusercontent.com 199.232.96.133 avatars2.githubusercontent.com 199.232.96.133 avatars3.githubusercontent.com 199.232.96.133 avatars4.githubusercontent.com 199.232.96.133 avatars5.githubusercontent.com 199.232.96.133 avatars6.githubusercontent.com 199.232.96.133 avatars7.githubusercontent.com 199.232.96.133 avatars8.githubusercontent.com 199.232.96.133 avatars9.githubusercontent.com 199.232.96.133 avatars10.githubusercontent.com 199.232.96.133 avatars11.githubusercontent.com 199.232.96.133 avatars12.githubusercontent.com 199.232.96.133 avatars13.githubusercontent.com 199.232.96.133 avatars14.githubusercontent.com 199.232.96.133 avatars15.githubusercontent.com 199.232.96.133 avatars16.githubusercontent.com 199.232.96.133 avatars17.githubusercontent.com 199.232.96.133 avatars18.githubusercontent.com 199.232.96.133 avatars19.githubusercontent.com 199.232.96.133 avatars20.githubusercontent.com # GitHub End ==================================================== =============== 2. 修改 .npmrc，添加以下内容，如果没有此⽂件可⾃定创建。 # windows 系统下 .npmrc ⽂件位置：c:\Users\你的名字.npmrc sharp_binary_host = https://npm.taobao.org/mirrors/sharp sharp_libvips_binary_host = https://npm.taobao.org/mirrors/sharp-libvips profiler_binary_host_mirror = https://npm.taobao.org/mirrors/node-inspector/ fse_binary_host_mirror = https://npm.taobao.org/mirrors/fsevents node_sqlite3_binary_host_mirror = https://npm.taobao.org/mirrors sqlite3_binary_host_mirror = https://npm.taobao.org/mirrors sqlite3_binary_site = https://npm.taobao.org/mirrors/sqlite3 sass_binary_site = https://npm.taobao.org/mirrors/node-sass electron_mirror = https://npm.taobao.org/mirrors/electron/ puppeteer_download_host = https://npm.taobao.org/mirrors chromedriver_cdnurl = https://npm.taobao.org/mirrors/chromedriver operadriver_cdnurl = https://npm.taobao.org/mirrors/operadriver phantomjs_cdnurl = https://npm.taobao.org/mirrors/phantomjs python_mirror = https://npm.taobao.org/mirrors/python registry = https://registry.npm.taobao.org/ disturl = https://npm.taobao.org/dist //registry.npmjs.org/:_authToken=43331cb5-0c98-4e1c-8585-a2f8eb9db797 如果安装失败，则必须删除项⽬中的 node_modules 再重新安装依赖

配置

在 vue.config.js 中设置以下配置信息，⽤来对 webpack 进⾏ loader 配置。 // vue.config.js module.exports = { … // 图⽚压缩 loader 配置 chainWebpack: config => { // 配置图⽚压缩 config.module .rule(‘images’) .use(‘image-webpack-loader’) .loader(‘image-webpack-loader’) .options({ bypassOnDebug: true }) .end() } }