Tauri打包发布后bootstrap.bundle.min.js无法正常工作的问题

问题根源 #

SvelteKit的构建机制不会自动识别src/lib/js这类目录下的静态资源，打包后这些文件不会被复制到输出目录；同时Tauri打包后对资源路径的解析逻辑和开发模式不同，直接引用本地相对路径会导致找不到JS文件，出现Asset not found的错误。CSS正常是因为你可能通过正确的方式（比如npm导入或静态资源引用）让打包工具处理了CSS文件。

解决方案 #

方案1：通过npm直接导入Bootstrap（推荐） #

不需要手动复制Bootstrap文件，直接利用npm包管理让SvelteKit打包时自动处理资源：

1. 确保已安装Bootstrap：

npm install bootstrap

2. 在SvelteKit的根布局文件src/routes/+layout.svelte中导入Bootstrap的CSS和JS：

<script>
  // 导入Bootstrap JS（包含Popper.js，无需额外安装）
  import 'bootstrap/dist/js/bootstrap.bundle.min.js';
  // 导入Bootstrap CSS
  import 'bootstrap/dist/css/bootstrap.min.css';
</script>

<slot />

这种方式下，SvelteKit会把Bootstrap的JS和CSS整合到构建产物中，Tauri打包后能正常加载，不会出现路径问题。

方案2：使用SvelteKit静态资源目录 #

如果坚持使用本地文件，将Bootstrap资源放到SvelteKit的static目录（无此目录则在项目根目录创建）：

1. 把bootstrap.bundle.min.js放到static/js/目录，bootstrap.min.css放到static/css/目录；
2. 在页面或布局文件中引用：

<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/bootstrap.bundle.min.js"></script>

SvelteKit会完整复制static目录下的所有文件到构建输出的根目录，使用根路径/xxx引用能确保Tauri打包后正确找到资源。

检查Tauri配置 #

确保tauri.json中的构建配置正确指向SvelteKit的输出目录：

{
  "build": {
    "beforeBuildCommand": "npm run build",
    "frontendDist": "../build",
    "devUrl": "http://localhost:5173",
    "beforeDevCommand": "npm run dev"
  }
}

beforeBuildCommand会触发SvelteKit先完成生产构建，Tauri再打包构建好的静态资源。

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