一.vue-cli将图片转化成webp格式
1.安装vue-webp-plugin
npm install --save vue-webp-plugin
2.配置webp-plugin（在main.js中插入下面代码）
import WebpPlugun from 'vue-webp-plugin';Vue.use(WebpPlugun);
3.使用方法：
方法1：url可以为数组配合v-for使用，但是不能为数组单独使用
<img v-webp="url"/><script>export default {data() {return {url: require('static/home_top_bg.png')}}}</script>
方法2：远程图片
<img v-webp="'/99fenqi/vue//static/home_top_bg.png'"/>
方法3：设置背景图片
<div v-webp:bg="require('static/home_top_bg.png')"></div>
他帮你优先引入webp图片，如果没有webp图片就会加载jpg图片
二、用webpack将jpg图片打包一份为webp图片
1.下载webp-loader（已经有webp图片可以跳过这部直接webpack打包）
npm install webp-loader --save-dev //webpack打包webp
2.找到webpack.base.conf.js文件配置loader(这是webpack的配置文件)
3.找到module 下的打包图片的loader（如下）
将png|jpe?g|删除然后另外创一个如下
代码：
{test: /\.(gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}},{test: /\.(jpe?g|png)$/i,loaders: ['file-loader','webp-loader']},
然后npm run build 就可以了
下面说一下vue-webp-plugin的一些坑和用法（可跳过）
在只用过程中，url可以为数组,但只限于v-for使用如下
<div class="foot"><div class="foot2" v-for="(item,index) in items1" :key="index"><img :src="item.src" alt /></div><script>data() {//此处省略了很多代码return {items1:[]//存储图片路径}},mounted(){//通过mounted批量插入图片路径，这样就不用一个一个定义let arr = this.items1;for(let i = 0;i<9;i++){arr[i].src = require('../../image/'+(i+1)+'.jpg');//插入items1 9张图片路径}}</script>
上面是正确的用法，但是用如下就会报错
<div class="foot"><div class="foot2"><img :src="item[0]" alt />//这里没用v-for</div><script>data() {//此处省略了很多代码return {items1:[]//存储图片路径}},mounted(){//通过mounted批量插入图片路径，这样就不用一个一个定义let arr = this.items1;for(let i = 0;i<9;i++){arr[i] = require('../../image/'+(i+1)+'.jpg');//插入items1 9张图片路径}}</script>
你会发现会报错，由于vue-webp-plugin的作者没做数组兼容，所以只能通过v-for配合数组使用，而单独使用的时候只能单独定义图片路径
