vite vite-plugin-static-copy 插件的使用

13 min read

vite-plugin-static-copy插件可将指定静态文件复制到输出目录中，使用方法如下：

  1. 安装插件
npm install vite-plugin-static-copy -D

或

yarn add vite-plugin-static-copy -D
  1. 引入插件

在vite.config.js中引入插件并配置需要复制的静态文件路径和目标输出路径：

import { defineConfig } from 'vite';
import staticCopy from 'vite-plugin-static-copy';

export default defineConfig({
  plugins: [
    staticCopy({
      patterns: [
        { from: 'static/**/*', to: './dist' },
      ],
    }),
  ],
});

上面的配置将所有static目录下的文件复制到输出目录./dist中。

  1. 运行项目

运行项目即可在输出目录中看到复制的静态文件。

注意事项：

  • patterns属性为一个数组，可以配置多个需要复制的文件路径；
  • from属性为待复制的文件路径，可以使用通配符进行匹配；
  • to属性为复制到的目标路径，可以是相对路径或绝对路径；
  • 如果目标路径不存在则会自动创建。