在SvelteKit的app.html中引入Bootstrap5后Vite报文件未找到错误求助

• 问题根源：Bootstrap的压缩版（min后缀）文件默认会在末尾添加源映射（source map）的引用注释，Vite会根据这个注释去请求对应的.map文件，但你的/static目录里没有存放这些map文件，因此抛出未找到错误。

• 解决办法1：补上缺失的map文件
  去Bootstrap官网下载对应5.0.2版本的bootstrap.min.css.map和bootstrap.bundle.min.js.map文件，放到/static/vendors/bootstrap-5.0.2/目录下，和对应的min文件放在一起，Vite就不会再报错。

• 解决办法2：移除源映射引用
  如果你不需要源映射功能，直接修改现有文件即可：

  1. 打开bootstrap.bundle.min.js，删掉末尾类似//# sourceMappingURL=bootstrap.bundle.min.js.map的注释
  2. 若使用bootstrap.min.scss编译CSS，在编译前给scss文件开头加上$enable-source-maps: false;再重新编译；如果是直接用预编译的CSS文件，打开文件删掉末尾的/*# sourceMappingURL=bootstrap.min.css.map */注释

• 解决办法3：通过Vite配置屏蔽报错
  在项目根目录的vite.config.js中添加配置，让Vite忽略这些不存在的map文件请求：

  import { sveltekit } from '@sveltejs/kit/vite';
  import { defineConfig } from 'vite';
  
  export default defineConfig({
    plugins: [sveltekit()],
    server: {
      proxy: {
        '/vendors/bootstrap-5.0.2/*.map': {
          target: 'http://localhost:5173',
          changeOrigin: true,
          rewrite: () => '/favicon.ico' // 重写到项目中存在的文件，规避报错
        }
      }
    }
  });
  

  注：此方法属于曲线救国，优先推荐前两种直接解决问题的方式。

内容的提问来源于stack exchange，提问作者Tadas V.