Vue3的Vite中实现图片的动态加载

2023-10-18 18:14:43

Vue3 中 Vite 实现图片动态加载

在构建快速高效的 Vue3 项目时，利用 Vite 的特性是明智之举。其中一项重要特性是图片动态加载，它可以显著提升页面加载速度。本文将深入探讨如何在 Vue3 中使用 Vite 实现这一功能。

什么是图片动态加载？

传统上，页面一加载就会立即加载所有图片。然而，图片动态加载采用不同的方法，它仅在需要时才加载图片。这样一来，页面初始加载速度得以提高，服务器请求次数也随之减少。

安装 Vite

要使用 Vite，我们首先需要将其安装到项目中。只需运行以下命令：

npm install vite

创建 Vue 项目

接下来，创建一个新的 Vue 项目：

vite create my-project

配置 Vite

在项目根目录下，创建一个名为 vite.config.js 的文件。将以下代码添加到该文件中：

module.exports = {
  plugins: [
    require('vite-plugin-imagemin')({
      // TinyPNG API 密钥
      apiKey: 'YOUR_TINYPNG_API_KEY',
    }),
  ],
}

在 Vue 组件中使用图片动态加载

在 Vue 组件中，我们可以利用 ref() 函数创建可变的 imageUrl 变量，并使用 onMounted() 钩子函数在组件挂载时将其设置为图片路径。

<template>
  <img :src="imageUrl" />
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const imageUrl = ref(null)

    // 加载图片
    onMounted(() => {
      imageUrl.value = 'path/to/image.png'
    })

    return {
      imageUrl,
    }
  },
}
</script>