vite+vue3图片懒加载 插件

可以使用vue3-lazyload插件进行图片懒加载。

安装：

npm install vue3-lazyload

使用：

import { createApp } from 'vue'
import App from './App.vue'
import VueLazyload from 'vue3-lazyload'

const app = createApp(App)

app.use(VueLazyload, {
  loading: '/loading.gif', // 占位图
  error: '/error.jpg' // 加载失败图
})

app.mount('#app')

在需要使用懒加载的图片上添加`v-lazy`指令即可：

<template>
  <img v-lazy="'/img/lazy.png'" alt="">
</template>

相关问题

vite+vue3项目打包图片压缩

可以使用vite-plugin-imagemin插件对vite+vue3项目中的图片进行压缩。该插件可以自动将图片进行优化和压缩，以减小图片文件的大小，提高网页加载速度。

以下是使用vite-plugin-imagemin插件进行图片压缩的步骤：

1. 首先，安装vite-plugin-imagemin插件。可以使用npm或yarn进行安装：

npm install vite-plugin-imagemin --save-dev

2. 在vite.config.js文件中，引入vite-plugin-imagemin插件，并将其添加到plugins配置中：

import { defineConfig } from 'vite'
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    viteImagemin()
  ]
})

3. 配置vite-plugin-imagemin插件的参数。可以根据需要进行配置，例如设置压缩质量、忽略某些文件等：

export default defineConfig({
  plugins: [
    viteImagemin({
      quality: '65-80', // 设置压缩质量
      exclude: ['assets/icons/*.svg'] // 忽略某些文件
    })
  ]
})

4. 重新运行vite构建命令，插件将自动对项目中的图片进行压缩：

npm run build

通过以上步骤，vite-plugin-imagemin插件将会自动对项目中的图片进行压缩，优化图片文件大小，提高网页加载速度。

vite+vue3样式使用scoped怎么热更新

在Vite + Vue3中使用Scoped CSS (即具名 scoped) 并进行热更新，你需要确保Vue的`@apply`和`style`特性都已启用，同时配合Vite的自动模块打包功能。这里是一些步骤：

1. **Vue 3 scoped样式**：在`.vue`组件内的`<style>`标签内，使用`@apply`和`:global`结合来应用样式，而不是直接写`class`。

<style>
  :global {
    /* 全局样式 */
  }
  
  .custom-class {
    @apply color-red bg-blue;
  }
</style>

2. **启用Vue的 scoped 特性**：在`main.js`或配置文件中，确保Vue CLI的配置里开启了`runtimeCompiler`属性以及`@vue/compiler-sfc`插件，这将允许Vue在运行时编译模板。

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.config.productionTip = false
// 开启运行时编译
app.use({ runtimeCompiler: true })
app.mount('#app')

3. **Vite配置**：在`vite.config.js`中配置CSS处理，启用css预处理器如Sass、Less，并开启Vite的`optimizeDeps`选项以便按需加载和热更新。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      // 如果使用Sass或Less
      sass: {},
      less: {},
    },
  },
  optimizeDeps: {
    include: ['vue', 'your-style-dependencies'],
  },
})

4. **热更新**：每次你在样式文件中做更改，保存后Vite会检测到并自动编译更新的CSS。由于用了`@apply`和`:global`，Vite会智能地只更新涉及的模块，而非整个样式表，从而实现热更新。

注意，虽然Vite本身支持即时刷新，但是依赖于浏览器是否支持HMR（Hot Module Replacement）。如果浏览器不支持，你可能需要手动刷新页面查看更新。