使用Tauri+SvelteKit创建多窗口时settings.html报404错误

问题核心 #

使用Tauri结合SvelteKit开发桌面应用时，通过WebviewWindow创建新窗口并指定url: 'settings.html'会触发404错误，但指定index.html可正常打开新窗口。build目录下确实存在两个HTML文件，同时Vite构建时会收到build.rollupOptions.input被SvelteKit覆盖的警告。

问题原因 #

SvelteKit作为全栈框架会自动接管Vite的构建配置，你在vite.config.ts中手动配置的rollupOptions.input会被SvelteKit强制覆盖，导致自定义的settings.html在开发/构建流程中未被正确处理。此外，SvelteKit默认采用单页应用模式，直接访问独立HTML文件的方式不符合其路由逻辑。

解决方案 #

方案1：用SvelteKit路由实现多页面（推荐） #

将settings页面作为SvelteKit的路由页面，而非独立HTML文件：

1. 在项目中创建路由文件：src/routes/settings/+page.svelte，编写settings页面的内容。
2. 修改创建窗口的代码，将url改为路由路径：

async function openNewWindow() {
    const newWindow = new WebviewWindow(Math.floor(Math.random() * 1000).toString(), {
      url: '/settings', // 替换为路由路径
      width: 800,
      height: 600,
    });

    newWindow.once('tauri://created', () => {
      console.log('新窗口创建成功');
    });

    newWindow.once('tauri://error', (e) => {
      console.error('创建新窗口失败:', e);
    });
}

3. 删除vite.config.ts中build.rollupOptions.input的配置，消除被覆盖的警告。

方案2：通过静态目录添加独立HTML文件 #

如果必须使用独立的settings.html文件：

1. 将settings.html（及其依赖的CSS/JS文件）放入项目的static目录下，SvelteKit会自动将该目录下的文件复制到build目录。
2. 修改创建窗口的代码，url使用绝对路径：

url: '/settings.html'

3. 删除vite.config.ts中build.rollupOptions.input的配置，消除警告。

验证方式 #

• 开发模式下运行npm run tauri dev，打开新窗口即可正常访问settings页面。
• 构建生产包npm run tauri build后，build目录下会包含settings.html，窗口可正常加载。

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