SvelteKit：CSS引用静态资源时开发/构建环境路径问题

方案1：使用绝对路径访问静态资源 #

直接修改CSS中的路径为根绝对路径：

div { background-image: url('/img/bg.jpg'); }

• 开发模式：SvelteKit开发服务器自动将根路径的/img映射到static/img，图片正常加载。
• 构建模式：Vite保留该绝对路径，部署后/img/bg.jpg对应部署根目录下的img/bg.jpg（static文件夹内容会完整复制到部署根目录）。
  提示：此方式下图片不会被Vite优化（如哈希命名、压缩），适合无需构建优化的静态资源。

方案2：配置环境感知别名（支持Vite资源优化） #

若需要Vite对图片进行构建优化（如打包到_app/immutable/assets），在vite.config.ts中根据环境设置别名：

1. 更新vite.config.ts：

import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig(({ mode }) => ({
  plugins: [sveltekit()],
  resolve: {
    alias: {
      $img: mode === 'development' ? '/img' : '/static/img',
    },
  },
}));

2. 保持CSS中的路径：

div { background-image: url($img/bg.jpg); }

• 开发模式：$img解析为/img，对应static/img/bg.jpg。
• 构建模式：$img解析为/static/img，Vite会处理该资源并打包到_app/immutable/assets，生成正确访问路径。

方案3：迁移资源到src目录（推荐用于需优化的资源） #

将图片从static/img移至src/lib/assets/img，然后在CSS中使用相对路径（根据组件所在目录调整）：

div { background-image: url('../lib/assets/img/bg.jpg'); }

Vite会自动解析并优化该资源，开发与构建模式均能正常加载，同时支持哈希命名、压缩等生产环境优化，符合SvelteKit官方推荐的资源管理方式。

内容的提问来源于stack exchange，提问作者Nicolas Le Thierry d'Ennequin