使用 ES6 导出/导入时出现 MIME 类型错误答案

【问题标题】：MIME type error while using ES6 export/import使用 ES6 导出/导入时出现 MIME 类型错误
【发布时间】：2020-02-18 13:41:24
【问题描述】：

如何在使用 ES6 导出/导入时摆脱“forbidden MIME type („text/html”)”错误？
我的 html:
<script src="app.js" type="module"></script> app.js：

import {about} from "./templates/about"
let contentContainer = document.getElementById('contentContainer');
const routes = {
    "/" : about,
}

window.onpopstate = () =>{
    contentContainer.innerHTML = routes[window.location.pathname];
}
console.log("script")

关于.js：

export const about =`
<section class="about-us">
            <div class="about-us-img">
                <div class="img-shader">
                    <h1 class="about-title">ABOUT US</h1>
                    <article class="about-description">
                        <p>Our company specializes in high quality wooden products.</p>
                        <p>We care about natural environment so we plant two trees for each one we cut down to make the product.</p>
                    </article>
                    <button id="shop-link">shop now</button>
                </div>
            </div>
        </section>
`

我也在使用 Firefox 73，VSCode 的 liveserver 扩展，这是客户端应用程序。我尝试将 text/javascript 类型添加到脚本标记，但这没有帮助。

【问题讨论】：

是复制粘贴错误还是您没有关闭about 功能？以“`”开头但没有结尾“`”
谢谢，这是复制粘贴错误。我也尝试过导出 IIFE（而不是变量），它会返回文本但它也失败了

标签： html mime-types es6-modules

【解决方案1】：

您需要提供脚本的 URL。

"./templates/about" 指向一个 HTML 文档。

可能你需要"./templates/about.js"。

请注意，浏览器无法实现 Node.js 的模块名称解析系统，该系统可以自动找出文件扩展名。浏览器使用没有文件扩展名的 URL（因为它们可能有一个句号，后跟几个字母，格式看起来像文件扩展名）。

【讨论】：