错误：JS 文件中 Vite Vue 中出现意外的“<”答案

【问题标题】：Error: Unexpected "<" in Vite Vue in JS files错误：JS 文件中 Vite Vue 中出现意外的“<”
【发布时间】：2023-12-03 13:40:02
【问题描述】：

当我使用 Vue-CLI 时，下面的代码运行没有任何问题。

export const resourceCenterIcon =   <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-gift" viewBox="0 0 16 16">
                                        <path d="M3 2.5a2.5 2.5 0 0 1 5 0 2.5 2.5 0 0 1 5 0v.006c0 .07 0 .27-.038.494H15a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 14.5V7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2.038A2.968 2.968 0 0 1 3 2.506V2.5zm1.068.5H7v-.5a1.5 1.5 0 1 0-3 0c0 .085.002.274.045.43a.522.522 0 0 0 .023.07zM9 3h2.932a.56.56 0 0 0 .023-.07c.043-.156.045-.345.045-.43a1.5 1.5 0 0 0-3 0V3zM1 4v2h6V4H1zm8 0v2h6V4H9zm5 3H9v8h4.5a.5.5 0 0 0 .5-.5V7zm-7 8V7H2v7.5a.5.5 0 0 0 .5.5H7z"/>
                                    </svg>;

现在，我正在尝试将我的代码移动到 Vite，它给出了错误，

Error: Unexpected "<"

谁能解释一下具体原因...

【问题讨论】：

通常 Javascript 不喜欢将标记分配给变量或常量。尝试用反引号包裹你的 SVG。

标签： vue.js vuejs3 vite

【解决方案1】：

JSX in Vite 需要插件：@vitejs/plugin-vue-jsx

安装插件：
```
npm i -D @vitejs/plugin-vue-jsx
```

JSX 必须在 .jsx 文件中使用：

// ResourceCenterIcon.jsx
export const resourceCenterIcon = <svg>...</svg>

然后导入它，像组件一样使用：

<script setup>
import { resourceCenterIcon } from './components/ResourceCenterIcon'
</script>

<template>
  <resourceCenterIcon />
</template>

demo

【讨论】：