🎉 vite-plugin-public-transform

English | 简体中文

Improving the handling of static resources in Vite through replacing target string directly.

🚀 Usage

Just use /public/anything directly, whatever in js or dom.

<!-- Directly use the path in DOM! -->
<img src="/public/it-worked.svg" />

<img src="${pic}" />
<img src="${logo}" />

// It can work but Vite will throw a warn.
// Recommend use `url` in `Dom` directly.
import pic from '/public/pic.svg'

// The original usage can also work.
import logo from '/logo.svg'

// It can also work.
await fetch('/public/geojson.json')

/public/ will be replaced with base during compilation.

📝 Install

Taking pnpm as an example:

$ pnpm i -D vite-plugin-public-transform

Call it in plugins option.

import { defineConfig } from 'vite'
import VitePluginPublic from 'vite-plugin-public-transform'

export default defineConfig({
  plugins: [
    // ...
    VitePluginPublic()
  ]
})

🔧 Options

It can receive a string, which will be replaced.

In default it is /public/.

// vite.config.js
VitePluginPublic('~public/')

// main.ts
document.querySelector('#app').innerHTML = `
  <img src="~public/it-worked.svg" />
`

Or a RegExp ( Do not forget to use global mark! )

// vite.config.js
VitePluginPublic(/~public/g)

// main.ts
document.querySelector('#app').innerHTML = `
  <img src="~public/it-worked.svg" />
`

Or a string array, to represent multiple replacement targets.

// vite.config.js
VitePluginPublic(['/public/', '~p/'])

// main.ts
document.querySelector('#app').innerHTML = `
  <img src="/public/it-worked.svg" />
`
document.querySelector('#twin').innerHTML = `
  <img src="~p/it-worked.svg" />
`

License

MIT ❤️