Caution
Vue 2 has reached EOL, and this project is no longer actively maintained.
Note: this plugin only works with Vue@^2.7.0.
// vite.config.js
import vue from '@vitejs/plugin-vue2'
export default {
plugins: [vue()]
}export interface Options {
include?: string | RegExp | (string | RegExp)[]
exclude?: string | RegExp | (string | RegExp)[]
isProduction?: boolean
// options to pass on to vue/compiler-sfc
script?: Partial<Pick<SFCScriptCompileOptions, 'babelParserPlugins'>>
template?: Partial<
Pick<
SFCTemplateCompileOptions,
| 'compiler'
| 'compilerOptions'
| 'preprocessOptions'
| 'transpileOptions'
| 'transformAssetUrls'
| 'transformAssetUrlsOptions'
>
>
style?: Partial<Pick<SFCStyleCompileOptions, 'trim'>>
}When @vitejs/plugin-vue2 compiles the <template> blocks in SFCs, it also converts any encountered asset URLs into ESM imports.
For example, the following template snippet:
<img src="https://github.com/../image.<span class="pl-e">png" />Is the same as:
<script setup>
import _imports_0 from '../image.png'
</script><img :src="_imports_0" />By default the following tag/attribute combinations are transformed, and can be configured using the template.transformAssetUrls option.
{
video: ['src', 'poster'],
source: ['src'],
img: ['src'],
image: ['xlink:href', 'href'],
use: ['xlink:href', 'href']
}Note that only attribute values that are static strings are transformed. Otherwise, you'd need to import the asset manually, e.g. import imgUrl from '../image.png'.
import vue from '@vitejs/plugin-vue2'
export default {
plugins: [
vue({
template: {
compilerOptions: {
// ...
},
transformAssetUrls: {
// ...
}
}
})
]
}import vue from '@vitejs/plugin-vue2'
const vueI18nPlugin = {
name: 'vue-i18n',
transform(code, id) {
if (!/vue&type=i18n/.test(id)) {
return
}
if (/\.ya?ml$/.test(id)) {
code = JSON.stringify(require('js-yaml').load(code.trim()))
}
return `export default Comp => {
Comp.i18n = ${code}
}`
}
}
export default {
plugins: [vue(), vueI18nPlugin]
}MIT
