Vue3 uses vite-plugin-vue-setup-extend does not take effect

​Plug-in name: vite-plugin-vue-setup-extend
1. Installation

npm i vite-plugin-vue-setup-extend -D

2. Configuration ( vite.config.ts )

import {
    
     defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
    
    
  plugins: [ 
    vue(),
    VueSetupExtend(),
 ]
})

or another way of writing

import {
    
     defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default ({ mode }: any) => {
    
    
  return defineConfig({
    
    
    plugins: [vue(), VueSetupExtend()],  
  })
}



3. Use

<script lang="ts" setup name="test">
	// test
	</script>

Problem:
When using vite-plugin-vue-setup-extend 0.4.0 and previous versions, there will be a problem: if there is no content in the script tag, even if the name attribute is added to the script tag, it will not be displayed in vue-devtools will take effect.
Solution: Do not leave the script tag empty, for example: add line comments.

Guess you like

Origin blog.csdn.net/weixin_45441173/article/details/129116782