VS Code运行JavaScript贪吃蛇游戏报import模块错误如何解决？

问题根源 #

你在HTML的<script>标签上设置的type="module"仅作用于浏览器端的模块解析规则，而VS Code右上角的运行按钮默认调用Node.js执行当前JS文件，Node.js的ES模块识别规则和浏览器完全独立，HTML里的配置对Node.js不生效。

解决方案 #

场景1：贪吃蛇为网页端游戏，仅需在浏览器运行 #

不需要通过VS Code运行按钮执行game.js，直接打开对应HTML文件即可正常加载游戏。如果需要便捷调试，可安装VS Code的Live Server插件，右键HTML文件选择「Open with Live Server」启动浏览器预览即可。

场景2：确实需要通过Node.js执行JS文件（如单元测试等场景） #

满足Node.js的ES模块规则即可，二选一操作：

• 方法1：在项目根目录（snake文件夹）新建package.json文件，添加以下配置：

{
  "type": "module"
}

• 方法2：将所有用到ES模块导入/导出的JS文件后缀从.js改为.mjs，同步修改HTML的script引入路径、JS文件内的import路径后缀即可。

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