使用Vite构建SolidJS项目时部分SVG资源未被打包的问题

针对你遇到的部分SVG未被包含在构建文件夹的问题，可尝试以下几种解决方案：

1. 显式指定SVG导入为URL资源 #

Vite默认导入SVG的行为可能因配置而异，若你之前尝试过内联SVG的配置，可能导致SVG被转译为组件而非资源文件。此时需在导入语句后添加?url后缀，强制Vite将SVG处理为资源URL：

import Head from "../assets/svgs/head.svg?url";
import Body from "../assets/svgs/body.svg?url";
import LeftArm from "../assets/svgs/leftArm.svg?url";
import RightArm from "../assets/svgs/rightArm.svg?url";
import LeftLeg from "../assets/svgs/leftLeg.svg?url";
import RightLeg from "../assets/svgs/rightLeg.svg?url";

这样导入的变量会直接对应构建后的资源路径，Vite会自动将SVG复制到dist文件夹，并在代码中替换为正确的URL。

2. 检查Vite的资源包含配置 #

如果SVG文件的路径较为特殊，可在vite.config.ts中明确添加assetsInclude配置，确保Vite将所有SVG识别为资源：

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  assetsInclude: ['**/*.svg'],
});

注：默认情况下Vite已支持SVG资源，此步骤为兜底方案，适用于自定义资源路径的场景。

3. 排查Tree Shaking误删问题 #

若仅部分SVG未被打包，可能是Vite的Tree Shaking机制误判该资源未被使用。可确保你的bodyParts数组在渲染逻辑中被实际调用，或给数组添加/*#__PURE__*/注释避免被误删：

const bodyParts = /*#__PURE__*/ [{
    name: "Head",
    id: "head",
    image: Head
},
// 其他元素...
];

为什么之前的内联SVG方法无效？ #

内联SVG方案通常是将SVG转译为SolidJS组件，此时导入的变量是组件而非资源URL，无法直接作为background-image的路径使用，因此Vite不会将其作为静态资源打包到dist文件夹中。

内容的提问来源于stack exchange，提问作者Jensen Perry