First commit
This commit is contained in:
129
node_modules/@vitejs/plugin-vue2/README.md
generated
vendored
Normal file
129
node_modules/@vitejs/plugin-vue2/README.md
generated
vendored
Normal file
@@ -0,0 +1,129 @@
|
||||
# @vitejs/plugin-vue2 [](https://npmjs.com/package/@vitejs/plugin-vue2)
|
||||
|
||||
> [!CAUTION]
|
||||
> Vue 2 has reached EOL, and this project is no longer actively maintained.
|
||||
|
||||
---
|
||||
|
||||
> Note: this plugin only works with Vue@^2.7.0.
|
||||
|
||||
```js
|
||||
// vite.config.js
|
||||
import vue from '@vitejs/plugin-vue2'
|
||||
|
||||
export default {
|
||||
plugins: [vue()]
|
||||
}
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
```ts
|
||||
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'>>
|
||||
}
|
||||
```
|
||||
|
||||
## Asset URL handling
|
||||
|
||||
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:
|
||||
|
||||
```vue
|
||||
<img src="../image.png" />
|
||||
```
|
||||
|
||||
Is the same as:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import _imports_0 from '../image.png'
|
||||
</script>
|
||||
```
|
||||
|
||||
```vue
|
||||
<img :src="_imports_0" />
|
||||
```
|
||||
|
||||
By default the following tag/attribute combinations are transformed, and can be configured using the `template.transformAssetUrls` option.
|
||||
|
||||
```js
|
||||
{
|
||||
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'`.
|
||||
|
||||
## Example for passing options to `vue/compiler-sfc`:
|
||||
|
||||
```ts
|
||||
import vue from '@vitejs/plugin-vue2'
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
vue({
|
||||
template: {
|
||||
compilerOptions: {
|
||||
// ...
|
||||
},
|
||||
transformAssetUrls: {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Example for transforming custom blocks
|
||||
|
||||
```ts
|
||||
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]
|
||||
}
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Reference in New Issue
Block a user