Vite如何将static静态文件夹同时复制到dev与build目录？

方案一：使用Vite原生配置（无额外依赖，推荐） #

Vite 原生自带的 publicDir 配置可以完全匹配之前 CopyWebpackPlugin 的效果，不需要安装额外插件：

• dev 开发环境下，static 目录下的文件可以直接通过根路径访问
• build 构建时，static 目录下所有非点开头的隐藏文件会被原样复制到构建产物根目录

配置方式：在 vite.config.js 中添加如下配置即可

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

export default defineConfig({
  plugins: [vue()],
  // 指向项目中的static目录路径
  publicDir: path.resolve(__dirname, '../static')
})

方案二：使用 vite-plugin-static-copy 插件实现 #

如果因为特殊场景必须使用静态复制插件，之前配置不生效有4个核心原因：

• src 路径未添加通配符，会将整个 static 文件夹本身复制到目标路径，而非文件夹内的内容
• dest 参数传 '/' 不符合插件路径规则，该参数是相对构建输出目录（默认dist）的相对路径，传 '/' 会生成多余的嵌套目录
• 未开启开发环境支持，插件默认仅在build阶段执行复制
• 未配置忽略规则，点开头的隐藏文件也会被复制

正确配置步骤如下：

1. 先安装依赖

npm i vite-plugin-static-copy -D

2. 修改 vite.config.js 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import path from 'path'

export default defineConfig({
  plugins: [
    vue(),
    viteStaticCopy({
      // 开启开发环境复制，保证dev环境可正常访问资源
      dev: true,
      targets: [
        {
          // 末尾加 /* 匹配static目录下所有文件
          src: path.resolve(__dirname, '../static') + '/*',
          // 空字符串代表输出到构建产物根路径
          dest: '',
          // 过滤掉点开头的隐藏文件，和原CopyWebpackPlugin规则一致
          filter: (filePath) => {
            return !/(^|\/)\.[^\/\.]/g.test(filePath)
          }
        }
      ]
    })
  ]
})

内容的提问来源于stack exchange，提问作者coure2011