生产环境下如何在Vite项目中引入node_modules中的JS文件？

问题根源很明确：本地开发时Vite的开发服务器会处理/node_modules/路径，但生产打包后，node_modules目录不会被包含在构建产物里，直接引用这个路径自然会404。给你几个靠谱的解决办法：

方案1：通过ES模块导入并全局挂载（推荐） #

这种方式完全贴合Vite的打包逻辑，不用手动处理文件：

1. 打开项目的入口文件（普通Svelte项目是src/main.js，SvelteKit项目可以用src/routes/+layout.svelte的onMount钩子），添加以下代码：

// 导入sakura-js
import Sakura from 'sakura-js';
// 挂载到window对象，让index.html能全局调用
window.Sakura = Sakura;

2. 删除index.html里原来的<script src="/node_modules/sakura-js/dist/sakura.min.js"></script>标签，直接在需要的地方调用new Sakura(...)即可。Vite会自动把sakura-js打包到生产构建的bundle中，不会有路径问题。

方案2：使用public目录托管文件 #

如果你偏要保留script标签的引入方式，可以这么做：

1. 找到node_modules/sakura-js/dist/sakura.min.js，复制到项目的public目录下（可以新建public/js子目录存放），比如放在public/js/sakura.min.js。
2. 修改index.html里的script标签路径：

<script src="/js/sakura.min.js"></script>

Vite在生产打包时会把public目录下的文件原封不动复制到构建根目录，这个路径在生产环境就能正常访问了。

方案3：手动配置Rollup拆分chunk（不推荐） #

如果需要单独打包sakura-js，可在vite.config.js里添加配置：

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'sakura-js': ['sakura-js']
        }
      }
    }
  }
}

打包后会生成单独的sakura-js-xxxx.js文件（xxxx是哈希值），然后在index.html里引用这个文件。但这种方式需要每次打包后更新文件名，不如前两种方便，除非有特殊需求才用。

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