Vite 中文文档

vite-plugin-static-copy


CI

rollup-plugin-copy for Vite with dev server support.

NoteBefore you use this plugin, consider using public directory or import in JavaScript. In most cases, these will work.


Install


  1. ``` shell
  2. npm i -D vite-plugin-static-copy # yarn add -D vite-plugin-static-copy
  3. ```

Usage


Add viteStaticCopy plugin to vite.config.js / vite.config.ts.

  1. ``` js
  2. // vite.config.js / vite.config.ts
  3. import { viteStaticCopy } from 'vite-plugin-static-copy'

  5. export default {
  6.   plugins: [
  7.     viteStaticCopy({
  8.       targets: [
  9.         {
  10.           src: 'bin/example.wasm',
  11.           dest: 'wasm-files'
  12.         }
  13.       ]
  14.     })
  15.   ]
  16. }
  17. ```

For example, if you use the config above, you will be able to fetch bin/example.wasm with fetch('/wasm-files/example.wasm'). So the file will be copied to dist/wasm-files/example.wasm.

Warning


If you are using Windows, make sure to use normalizePath after doing path.resolve or else. \ is a escape charactor in fast-glob and you should use /.

  1. ``` js
  2. import { normalizePath } from 'vite'
  3. import path from 'node:path'

  5. normalizePath(path.resolve(__dirname, './foo')) // C:/project/foo

  7. // instead of
  8. path.resolve(__dirname, './foo') // C:\project\foo
  9. ```

See fast-glob documentation about this for more details.

Options


See options.ts.

Differences with rollup-plugin-copy


Faster dev server start-up than using rollup-plugin-copy on buildStart hook.
Files are not copied and served directly from the server during dev to reduce start-up time.

dest is relative to build.outDir.
If you are going to copy files outside build.outDir, you could use rollup-plugin-copy instead. Because that does not require dev server support.

fast-glob is used instead of globby.
Because fast-glob is used inside vite.

transform could return null as a way to tell the plugin not to copy the file, this is similar to the CopyWebpackPlugin#filter option, but it expects transform to return the original content in case you want it to be copied.
transform can optionally be an object, with a handler property (with the same signature of the rollup-plugin-copy transform option) and an encoding property (BufferEncoding | 'buffer' ) that will be used to read the file content so that the handler 's content argument will reflect the correct encoding (could be Buffer);
structured: true preserves the directory structure. This is similar to flatten: false in rollup-plugin-copy, but it covers more edge cases.