es6 import using.mjs 后缀因 MIME 错误而失败答案

【问题标题】：es6 import using.mjs suffix fails with MIME errores6 import using.mjs 后缀因 MIME 错误而失败
【发布时间】：2019-09-23 12:10:37
【问题描述】：

在最新的 chrome 浏览器中

import foo from '../dist/foo.mjs'

失败

加载模块脚本失败：服务器以非 JavaScript MIME 类型“”响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

但是如果我将文件复制到 foo.js

import foo from '../dist/foo.js'

有效！

我正在使用带有 localhost 路径和最新 chrome 的 mac os x 内置 Apache 服务器。

因此，在浏览器中，es6 导入对 .mjs 的首选节点后缀很敏感。

导入是在带有<script type="module"> 的html 文件中，而不是单独的模块文件中，但我怀疑这是问题所在。

有解决办法吗？

【问题讨论】：

【解决方案1】：

您需要使用.htaccess 文件或使用以下 htaccess 指令扩展您的 Apache 配置文件，以便服务器输出具有正确 MIME 类型的 mjs 扩展名的文件：

<IfModule mod_mime.c>
  AddType text/javascript js mjs
</IfModule>

当然，mod_mime 需要安装并启用才能正常工作。

【讨论】：