Vite搭配Svelte构建后dist文件夹未包含图片问题求助

先检查图片引用方式（优先解决） #

Vite在开发环境会直接读取本地文件，但生产构建时只会打包被识别为依赖资源的文件，多数问题出在引用方式上：

• 错误方式：直接写固定路径字符串，Vite无法识别为依赖，不会打包到dist：

  <!-- 这种写法build后图片会丢失 -->
  <img src="/src/images/logo.png" alt="Logo" />
  

• 正确方式1：ES模块导入，Vite会自动处理打包：

  <script>
    // 从相对路径导入图片
    import logo from './images/logo.png';
  </script>
  
  <img src={logo} alt="Logo" />
  

• 正确方式2：放在public文件夹下的图片，直接用根路径引用（public下的文件会原封不动复制到dist根目录）：

  <!-- 图片放在项目根目录的public/images下 -->
  <img src="/images/logo.png" alt="Logo" />
  

特殊场景需要配置vite.config.js #

如果需要动态生成图片路径（比如根据变量拼接），或者要强制打包特定格式/目录的资源，才需要修改配置：

1. 打开项目根目录的vite.config.js，添加assetsInclude选项，指定要打包的资源类型或路径：

   import { sveltekit } from '@sveltejs/kit/vite';
   import { defineConfig } from 'vite';
   
   export default defineConfig({
     plugins: [sveltekit()],
     // 匹配所有png/jpg/svg格式的图片，或者指定具体目录如'./src/assets/**/*'
     assetsInclude: ['**/*.png', '**/*.jpg', '**/*.svg']
   });
   

2. 动态路径的正确写法，用new URL()确保Vite能识别资源：

   <script>
     function getImagePath(imgName) {
       // 用import.meta.url定位当前模块路径，拼接图片地址
       return new URL(`./images/${imgName}.png`, import.meta.url).href;
     }
   </script>
   
   <img src={getImagePath('logo')} alt="Logo" />
   

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