如何在 Vite 中处理静态资源？

在 Vite 中处理静态资源非常简单，Vite 提供了多种方式来处理和优化静态资源（如图片、字体、JSON 文件等）。以下是详细步骤和配置说明：

1. 引入静态资源

图片：可以直接在 JavaScript 或 CSS 中引入图片。

import logo from './assets/logo.png';

const img = document.createElement('img');
img.src = logo;
document.body.appendChild(img);

字体：可以在 CSS 中引入字体文件。

@font-face {
  font-family: 'MyFont';
  src: url('./assets/fonts/MyFont.woff2') format('woff2');
}

JSON：可以直接引入 JSON 文件。

import data from './assets/data.json';

console.log(data);

2. 静态资源处理

自动处理：Vite 会自动处理静态资源，生成正确的 URL 并优化文件大小。
内联小文件：通过 assetsInlineLimit 配置将小文件内联为 base64 编码的 Data URL。
```
export default defineConfig({
  build: {
    assetsInlineLimit: 4096, // 4KB
  },
});
```

3. 配置静态资源目录

public 目录：public 目录下的文件会被直接复制到构建输出目录，不会被 Vite 处理。

示例：

public/
├── favicon.ico
└── robots.txt

引用 public 目录中的文件：

<link rel="icon" href="/favicon.ico" />

4. 使用 CDN

配置 base：通过 base 配置将静态资源托管到 CDN。

export default defineConfig({
  base: 'https://cdn.example.com/assets/',
});

5. 优化静态资源

压缩图片：使用 vite-plugin-imagemin 插件压缩图片。

安装：

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

配置：

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

export default defineConfig({
  plugins: [
    imagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false,
      },
      optipng: {
        optimizationLevel: 7,
      },
      mozjpeg: {
        quality: 20,
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4,
      },
      svgo: {
        plugins: [
          {
            name: 'removeViewBox',
          },
          {
            name: 'removeEmptyAttrs',
            active: false,
          },
        ],
      },
    }),
  ],
});

6. 处理 SVG

使用 vite-plugin-svg-icons 插件：将 SVG 图标作为 Vue 组件使用。

安装：

npm install vite-plugin-svg-icons --save-dev

配置：

import { defineConfig } from 'vite';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
});

使用：

<template>
  <svg>
    <use xlink:href="#icon-my-icon" />
  </svg>
</template>

<script>
import '@/icons/my-icon.svg';
export default {
  name: 'MyComponent',
};
</script>

示例：完整的静态资源处理配置

以下是一个完整的 vite.config.js 文件示例，包含常用的静态资源处理配置选项：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import imagemin from 'vite-plugin-imagemin';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

export default defineConfig({
  plugins: [
    vue(),
    imagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false,
      },
      optipng: {
        optimizationLevel: 7,
      },
      mozjpeg: {
        quality: 20,
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4,
      },
      svgo: {
        plugins: [
          {
            name: 'removeViewBox',
          },
          {
            name: 'removeEmptyAttrs',
            active: false,
          },
        ],
      },
    }),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
  build: {
    assetsInlineLimit: 4096, // 4KB
  },
  base: 'https://cdn.example.com/assets/',
});

总结

在 Vite 中处理静态资源非常简单，Vite 提供了多种方式来处理和优化静态资源。通过合理配置，可以充分利用静态资源的功能，提升开发效率和代码质量。

Vite 静态资源图片字体 JSON 内联 CDN 压缩 SVG

学在每日，进无止境！更多精彩内容请关注微信公众号。

原文出处：内容由AI生成仅供参考，请勿使用于商业用途。如若转载请注明原文及出处。

出处地址：http://www.07sucai.com/tech/896.html

博客站