在Vite中編寫插件需要遵循Vite的插件API

import type { Plugin } from 'vite';
export default function myPlugin(): Plugin {
return {
//插件生命周期鉤子
resolveConfig(config) {
//在這里可以修改配置
return config;
},
config(config) {
//返回一個部分或者全新的配置對象
return config
},
configureServer(server) {
//在開發服務器啟動時執行
},
configureDocs(docs){
//配置vite-plugin-vue-docs
},
loadConfigurationFile(filename) {
//讀取并返回配置文件
},
transformIndexHtml(html) {
//轉換index.html
return html;
},
transform(code, id, options){
return code
},
handleHotUpdate(ctx) {
//處理模塊熱更新
},
closeBundle() {
//打包結束時調用
}
}
}
新建一個vite文件夾
vite.config.ts里面引入編寫
import vueNamePlugin from './vite/plugins/vue-name' export default defineConfig({ plugins: [ vueNamePlugin() ] })

出現這個報錯只需要在tsconfig.node.json中加入以下即可

@vue/compiler-sfc 手動打包組件
import type { Plugin } from 'vite'
import { compileScript, parse } from '@vue/compiler-sfc'
export default function setupName(): Plugin {
return {
name: 'vite:plugin:vue:name',
enforce: 'pre',
transform(code, id) {
if (/.vue$/.test(id)) {
const { descriptor } = parse(code)
try {
const result = compileScript(descriptor, { id })
const name = result.attrs.name
const lang = result.attrs.lang
const inheritAttrs = result.attrs.inheritAttrs
const template = `
<script ${lang ? `lang=${lang}` : ''}>
export default {
${name ? `name:"${name}",` : ''}
${inheritAttrs ? `inheritAttrs: ${inheritAttrs !== 'false'},` : ''}
}
</script>
`
code += template
} catch (e) {
// TODO 忽略
}
}
return code
}
}
}
日常所遇,隨手而記。
浙公網安備 33010602011771號