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

ruisenLi

于 2022-04-24 16:11:21 发布

阅读量1.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：技巧文章标签： vue3

本文链接：https://blog.csdn.net/ruisenLi/article/details/124385175

技巧专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在使用Vue3.2的setup语法糖后如何优雅地定义组件name。当vite默认的文件命名不满足自定义需求时，提供了两种解决方案：一是通过在script标签中同时包含setup和非setup语法；二是使用vite-plugin-vue-setup-extend插件。特别地，对于插件vite-plugin-vue-setup-extend的早期版本，若script标签为空，则name属性可能无效，可以通过添加注释避免此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用 Vue3.2 的 setup 语法糖后，无法优雅的定义组件的 name 值，虽然 vite 会根据组件的文件名自动生成组件名，但是需要自定义的组件名时，就很不方便。

解决方法

方案1：写两个 script 标签

最简单的方法就是写两个script 标签，一个用 setup 语法，一个不用 setup 语法，代码如下：

<script>
    export default {
        name: 'demo'
    }
</script>

<script setup>
    // do something...
</script>

这种方法简单，但确实不够优雅

方案2：使用 vite 插件 vite-plugin-vue-setup-extend

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

配置 vite.config.ts

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

使用

<script lang="ts" setup name="demo">

</script>

问题：

在使用 vite-plugin-vue-setup-extend 0.4.0 及以前版本时，会有个问题：如果 script 标签内没有内容，即使给 script 标签添加上 name 属性，其在 vue-devtools 内也不会生效。

解决办法: 不要让script标签内空着，例如：加行注释。

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