【vue3】常见问题01： ＜script setup name=‘xxx‘＞上name无效的问题

项目环境：

{
	"vue": "3.4.21",
	"vite": "5.2.6",
}

项目场景：

项目场景：在vue3组件中使用这种方式命名太恶心了

defineOptions({
  // 命名当前组件
  name: "Demo"
})

---

问题描述

使用了 <script setup name='Demo'> 写法却报错,如下：

[vite] Internal server error: Attribute name cannot contain U+0022 ("), U+0027 ('), and U+003C (<)

解决方案：

1. 安装插件vite-plugin-vue-setup-extend

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

npm安装过慢的话使用pnpm试试

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

2. vite.confog.ts中使用插件

import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
   plugins: [
   		// 引入插件
   		VueSetupExtend()
   ]
})

3. 重启项目，查看效果
   注意⚠️：配置完成之后一定要重启项目！！！

<script lang="ts" setup name="Demo">
	console.log('在浏览器控制台的devtool中可以看到名称为Demo的组件了')
</script>