Vue3使用vite-plugin-vue-setup-extend 不生效问题

最新推荐文章于 2024-08-17 20:24:48 发布

@小朱呀路

最新推荐文章于 2024-08-17 20:24:48 发布

阅读量1.5k

点赞数

分类专栏： vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45441173/article/details/129116782

版权

vue3 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

文章介绍了如何安装和配置vite-plugin-vue-setup-extend插件，并指出在使用0.4.0及其以前版本时，若script标签内容为空，即使设置了name属性，在vue-devtools中也不会生效。解决这个问题的方法是在script标签内添加内容，如行注释。

摘要由CSDN通过智能技术生成

插件名称：vite-plugin-vue-setup-extend
1、安装

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

2、配置 ( vite.config.ts )

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

或者另一种写法

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

3、使用

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

问题：
在使用 vite-plugin-vue-setup-extend 0.4.0 及以前版本时，会有个问题：如果 script 标签内没有内容，即使给 script 标签添加上 name 属性，其在 vue-devtools 内也不会生效。
解决办法: 不要让script标签内空着，例如：加行注释。