如何在Tauri1.2.5+React中编译打包闪屏页splashscreen.html？

核心原因 #

你的构建工具（如Vite）默认仅将index.html作为唯一入口处理，不会自动编译打包额外的splashscreen.html及其依赖的TSX、SCSS文件，导致构建后该文件缺失，无法被Tauri加载。

解决方案（以Vite为例，适配Tauri 1.2.5默认模板） #

1. 修改Vite配置，添加闪屏页构建入口 #

编辑项目根目录下的vite.config.ts，在build.rollupOptions.input中新增splashscreen.html作为第二个构建入口：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: './index.html',
        splashscreen: './splashscreen.html'
      }
    }
  }
});

配置完成后，Vite会同时编译主页面和闪屏页的所有依赖（包括TSX、SCSS），并将编译后的splashscreen.html输出到dist目录。

2. 验证Tauri窗口配置路径 #

确认tauri.conf.json中的闪屏窗口url字段指向正确的文件路径，由于构建后splashscreen.html会出现在dist根目录，无需修改原配置：

{
    "width": 400,
    "height": 200,
    "decorations": false,
    "url": "splashscreen.html",
    "label": "splashscreen",
    "center": true,
    "transparent": true,
    "skipTaskbar": true,
    "alwaysOnTop": true,
    "title": "Elect"
}

3. 重新执行构建 #

运行以下命令完成应用构建：

yarn tauri build

备选方案（适配其他构建工具） #

如果使用Create React App等非Vite构建工具，可通过自定义脚本预处理闪屏资源：

1. 在package.json中添加闪屏页编译脚本（以esbuild为例）：

{
  "scripts": {
    "build:splash": "esbuild src/splashscreen.tsx --bundle --outfile=dist/splashscreen.js --loader:.scss=css",
    "build": "yarn build:splash && yarn build:react && yarn tauri build"
  }
}

2. 修改splashscreen.html的脚本引用为编译后的文件：

<script src="/splashscreen.js"></script>

3. 借助copyfiles工具将splashscreen.html复制到dist目录：

yarn add -D copyfiles

在package.json脚本中添加复制命令：

"copy:splash": "copyfiles splashscreen.html dist/"

关键检查点 #

• 确保splashscreen.scss已在splashscreen.tsx中通过import './splashscreen.scss';导入，让构建工具能追踪到依赖。
• 检查tauri.conf.json中build.distDir配置是否指向正确的构建输出目录（默认值为dist）。

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