Vite Vue项目JS文件内写SVG报Unexpected "<"错误

• Vue CLI 底层默认配置了 Babel 对普通 .js 文件中的 JSX 语法做自动转译，你代码中直接写的 <svg> 标签属于 JSX 语法，在 Vue CLI 环境下会被正常转译为合法的 JS 代码，因此可以正常运行。
• Vite 出于编译性能考虑，默认仅对后缀为 .jsx、.tsx 的文件做 JSX 语法转译，普通 .js 文件不会走 JSX 解析逻辑。当解析器遇到文件内的 < 符号时，会判定为不符合标准 JS 语法，直接抛出 Unexpected "<" 错误。

• 修改文件后缀：将存放这段代码的 .js 文件后缀改为 .jsx，Vite 会自动识别并转译其中的 JSX 语法，无需额外配置即可兼容原有写法。
• 调整 Vite 配置：如果不想修改文件后缀，可以在 vite.config.js 中配置 esbuild 规则，指定对 .js 文件也按照 JSX 规则解析，配置参考如下：

import { defineConfig } from 'vite'
export default defineConfig({
  esbuild: {
    loader: 'jsx',
    include: /src\/.*\.js$/, // 按需调整匹配范围
  }
})

• 改写代码写法：将 SVG 内容改为字符串导出，使用时通过 v-html 或者自定义 render 函数动态渲染，避免在普通 JS 文件中直接写标签语法。

内容的提问来源于stack exchange，提问作者Kasun Sampath Weligamage