手把手教你Vite打包后图片丢失的解决方法

前端

2023-10-15 22:38:34

使用 Vite 管理静态资源：告别图片丢失困扰

Vite 简介

Vite，一款备受推崇的前端构建工具，以其原生 ES 模块系统和极速的构建速度而著称。它可以轻松地整合 CSS 和 HTML，大幅提升开发效率。

静态资源处理难题

然而，在使用 Vite 构建项目时，我们可能遭遇一个棘手的难题：图片、图标等静态资源在打包后无影无踪。这是因为 Vite 默认情况下不会将这些资源纳入打包范围内。

解决之道

别担心！我们有两种方法来解决这个难题：

方法一：Vite 插件

我们可以借助一个名为 "vite-plugin-copy" 的 Vite 插件，让静态资源乖乖地复制到打包后的项目中。它的安装很简单：

npm install --save-dev vite-plugin-copy

然后，在 Vite 配置文件中添加如下代码：

// vite.config.js
const { defineConfig } = require('vite')
const copy = require('vite-plugin-copy')

module.exports = defineConfig({
  plugins: [
    copy({
      targets: [
        { src: 'src/assets', dest: 'dist/assets' },
      ],
    }),
  ],
})

如此一来，在打包过程中，静态资源便会乖乖地从 src/assets 目录复制到 dist/assets 目录中。

方法二：Vite 的 `assetsInclude` 选项

Vite 还提供了另一种方式来指定需要打包的静态资源，那就是 assetsInclude 选项。在 Vite 配置文件中，我们可以修改如下代码：

// vite.config.js
const { defineConfig } = require('vite')

module.exports = defineConfig({
  build: {
    assetsInclude: ['**/*.png', '**  /*.jpg', '**/*.gif', '**  /*.svg'],
  },
})