16 【打包 图片懒加载】

1.打包

vue.config.js

module.exports = {
  //打包时不生成map文件(用来进行错误提示的文件，很占用空间)
  productionSourceMap: false,
  // 关闭ESLINT校验工具
  lintOnSave: false,
}

pnpm run build

2.图片懒加载

懒加载vue-lazyload插件官网 (opens new window) 插件的使用直接参考官方教程，很简单。

安装vue-lazyload插件

pnpm add vue-lazyload@1.3.3 --save-dev

在main.js中进行引用

import VueLazyload from "vue-lazyload";

//或者自定义配置插件
Vue.use(VueLazyload, {
preLoad: 1.3,
error: require('@/assets/image/error.png'),
loading: require('@/assets/image/loading.gif'),
attempt: 1
})

各个自定义配置属性含义：

使用（将图片设置为懒加载 (opens new window)）

<img v-lazy="psdimg" class="psd" />

注意： 当遇到是v-for循环的时候，或者用div包裹着img的时候，需要在div上面添加 v-lazy-container="{ selector: ‘img’ }"

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//aaa.com/img1.jpg">
  <img data-src="//aaa.com/img2.jpg">
  <img data-src="//aaa.com/img3.jpg">  
</div>
  
<!--或者这种：-->
 
 <div v-lazy-container="{ selector: 'img' }" v-html="content">
</div>

如果是这种情况的话，一定要使用 data-src 来指定路径，而不使用v-lazy。因为如果使用的是v-lazy的话，拿到了图片地址也会一直显示不出来。