本地Nginx环境导入three.js JavaScript模块出现报错如何解决？

1. 修正文件名拼写错误 #

你两次在script标签中填写的文件名均为main.mj，属于拼写失误，需要改为你实际创建的main.js。

2. 修正script标签语法 #

最终script标签的标准写法如下：

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

注意type="module"的属性值需要加引号，符合HTML语法规范。

3. 配置Nginx的MIME类型规则 #

MIME类型报错是因为Nginx没有为JavaScript模块配置正确的响应头，按照以下步骤修改：

• 打开Nginx的MIME类型配置文件，默认路径：
  • Linux/Mac系统：/etc/nginx/mime.types
  • Windows系统：Nginx安装目录下的conf/mime.types
• 在配置文件的types代码块中，确认或添加如下配置：

types {
    application/javascript js mjs;
}

• 保存修改后重启Nginx服务生效，对应重启命令：
  • Linux/Mac：sudo nginx -s reload
  • Windows：在Nginx安装目录打开命令行执行nginx.exe -s reload

4. 验证配置效果 #

重启Nginx后清空浏览器缓存，重新访问页面即可解决模块加载报错。

额外提示：请确认项目目录下./js/three.module.js的路径真实存在，路径拼写错误同样会导致加载失败。

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