npm install vite-plugin-html-resolve-alias -Dyarn add vite-plugin-html-resolve-alias -Dpnpm install vite-plugin-html-resolve-alias -DAdd the plugin to your Vite config as follows:
import path from 'path'
import { defineConfig } from 'vite'
import viteHtmlResolveAlias from 'vite-plugin-html-resolve-alias'
export default defineConfig({
resolve: {
// https://vitejs.cn/config/#resolve-alias
alias: {
'@': path.resolve(__dirname, 'src/')
}
},
plugins: [
viteHtmlResolveAlias(/* Options */)
]
})Next, you can use aliases in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="@/main.css">
</head>
<body>
<img src="@/foo.png" />
<script src="@/main.js"></script>
</body>
</html>Specify the tag and tag attribute name to be resolved.
type Tags = Record<string, string[]>Default
{
video: ['src', 'poster'],
source: ['src'],
img: ['src'],
image: ['xlink:href', 'href'],
use: ['xlink:href', 'href'],
link: ['href'],
script: ['src']
}