无法使用JS模块：anime.js导入遇MIME类型错误求助

问题本质 #

你碰到的核心问题是导入anime.js的路径写错了，服务器找不到对应的JS文件，就返回了你的HTML页面（比如404时默认跳转到首页），但浏览器需要的是JS模块文件，所以触发了MIME类型不匹配的报错——这就是为啥点报错里的anime.es.js:1链接，显示的却是你的HTML文件。

排查修复步骤 #

• 核对文件路径
  先理清楚你的HTML文件和anime.es.js的目录结构：

  • 要是俩文件在同一个文件夹里，导入路径得写成./anime.es.js（别漏了开头的./）
  • 要是anime.es.js在子文件夹（比如js文件夹），路径就得写成./js/anime.es.js
    举个反例：如果文件实际在js文件夹里，你只写anime.es.js，服务器找不到文件就会返回HTML页面

• 确认script标签格式
  用模块导入时，script标签必须加type="module"，正确写法如下：

  <script type="module">
    import anime from './anime.es.js';
    // 这里写你的hello world动画代码
    anime({
      targets: 'h1',
      translateX: 200,
      duration: 1000
    });
  </script>
  

• 检查live-server启动目录
  启动live-server的时候，得从HTML文件所在的根目录启动，不能从上级目录启动。比如你的项目结构是：

  my-anime-project/
    index.html
    anime.es.js
  

  就得进到my-anime-project文件夹里再运行live-server命令

• 验证文件可访问性
  在浏览器地址栏直接输入http://127.0.0.1:8080/anime.es.js（把端口换成你live-server的实际端口），如果显示的是HTML页面，说明路径绝对错了；如果能看到JS代码，那路径才是对的

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