javascript - Vite中如何将静态文件夹同时复制到 "dev"和 "build"？

Question

我正在尝试将基于 Webpack 的 Vue.js 项目升级到 Vite。我有这样的文件夹结构:

 - src/
 - static/
 - tests/

在 Webpack 中，我是这样使用 CopyWebPackPlugin 的:

new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, '../static'),
    to: '',
    ignore: ['.*']
  }
]),

并复制静态文件夹中的所有文件，使其在开发和构建中都可用。

我想通过 Vite 做同样的事情，但不知道如何实现它。

我试过下面的代码，但没有用。

viteStaticCopy({
  targets: [
    {
      src: path.resolve(__dirname, '../static'),
      dest: '/'
    }
  ]
})

Answer 1

以下更改应等同于您之前的 CopyWebpackPlugin 设置:

1. vite-plugin-static-copy 不支持显式的 ignore 选项，但是你可以设置 src glob pattern排除点文件。

2. dest 应该是 './' 将文件复制到输出目录的根目录(默认为 dist ).

import { defineConfig } from 'vite'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import path from 'path'

export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: path.resolve(__dirname, './static') + '/[!.]*', // 1️⃣
          dest: './', // 2️⃣
        },
      ],
    }),
  ]
})

demo