SvelteKit使用adapter-netlify部署时静态资源缺失如何解决？

核心问题：适配器不匹配 #

你提到使用adapter-netlify但配置文件里实际用的是adapter-static，这是导致静态资源未正确打包的关键原因之一。adapter-static主要用于静态站点托管场景，而部署到Netlify需要专门的adapter-netlify来处理资源映射和部署逻辑。

解决步骤： #

1. 安装正确的适配器
   卸载当前的静态适配器，安装Netlify专用适配器：

   npm uninstall @sveltejs/adapter-static
   npm install @sveltejs/adapter-netlify --save-dev
   

2. 更新svelte.config.js配置
   将适配器替换为adapter-netlify，默认files.assets就是static目录，可省略该配置项：

   import adapter from '@sveltejs/adapter-netlify';
   import preprocess from 'svelte-preprocess';
   
   const config = {
       preprocess: preprocess(),
       kit: {
           adapter: adapter(),
           prerender: {
               default: true
           }
       }
   };
   
   export default config;
   

3. 验证资源引用路径
   确保组件中引用静态资源时使用根相对路径，避免相对路径在部署后解析异常：

   <!-- 正确写法 -->
   <img src="/images/photo.jpg" alt="示例图片">
   <link href="/fonts/roboto.woff2" rel="preload" as="font">
   
   <!-- 错误写法：相对路径可能导致部署后404 -->
   <img src="images/photo.jpg" alt="示例图片">
   

4. 检查Netlify构建配置
   在Netlify后台站点设置中确认：

   • 构建命令：npm run build
   • 发布目录：build（adapter-netlify默认输出到该目录）

额外排查点： #

• 若使用预渲染，确保所有引用静态资源的页面都被正确预渲染，未预渲染的页面可能需要手动调整资源路径。
• 检查static目录的文件结构，避免文件名大小写问题（Netlify文件系统区分大小写，本地开发环境可能不区分）。

内容的提问来源于stack exchange，提问作者alex-schuster