How do I copy a static folder to both "dev" and "build" in Vite?

user_277696 0
Viewed 717

I'm trying to upgrade my Webpack based Vue.js project to Vite. I have folder structure like this:

 - src/
 - static/
 - tests/

In Webpack, I was using CopyWebPackPlugin like this:

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

And copied all files inside the static folder to make it available on both dev and build.

I'd like to do the same via Vite but can't figure out what how to implement it.

I tried the following code but it didn't work.

viteStaticCopy({
  targets: [
    {
      src: path.resolve(__dirname, '../static'),
      dest: '/'
    }
  ]
})
vite vue.js javascript
1 Answers

The following changes should be an equivalent to your previous CopyWebpackPlugin settings:

  1. vite-plugin-static-copy does not support an explicit ignore option, but you can set the src glob pattern to exclude dotfiles.

  2. The dest should be './' to copy the files into the root of the output directory (default is 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

user_62771510
Related