Vite构建原生JS应用打包后dist缺失JS文件报错如何解决

问题根因 #

• Vite生产构建要求入口JS脚本必须声明type="module"才会被识别为打包入口，你当前的script标签没有添加该属性，导致生产构建时该JS文件没有被处理，自然不会生成到dist目录。
• 就算JS被正常打包，ES模块的作用域是隔离的，你在main.js内声明的connect函数默认仅在模块内部可访问，而内联onclick事件触发时会从全局window对象上查找对应方法，所以会报未定义错误。本地开发环境因为Vite的特殊处理没有暴露该问题，生产构建后就会触发报错。

修复步骤 #

1. 先修改index.html里的script标签，加上type="module"声明：

<script type="module" src="./src/main.js"></script>

2. 解决全局方法找不到的问题，两种方案二选一即可：
   • 方案1：不改动现有事件绑定写法，在main.js的connect函数声明后，手动挂载到全局对象：

     function connect() {
       // 原有逻辑保持不变
     }
     // 新增挂载全局的代码
     window.connect = connect
     

   • 方案2（更推荐，避免全局污染）：去掉input标签里的onclick属性，改用JS动态绑定事件：
     首先修改input标签：

     <input type="button" value="Connect" id="connectBtn" />
     

     然后在main.js里新增事件绑定逻辑：

     document.querySelector('#connectBtn').addEventListener('click', connect)
     

修改完成后重新执行构建命令，dist目录就会生成打包后的JS文件，部署后即可正常运行。

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