Question

vue应用程序在chrome中产生错误，我找不到答案

2022-05-31

2679

javascript vue.js

我正在尝试深入学习 Vue，因此我再次从文档的开头开始，从后往前学习。

这是我的 index.html 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Learning Vue</title>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index.js"></script>
  </body>
</html>

这是我的 index.js 文件：

import { createApp } from "vue";

import App from "./App.vue";

const app = createApp(App);

app.mount("#app");

这是我的 App.vue 文件：

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>
<script setup>
import { ref } from "vue";

const count = ref(0);

function increment() {
  count.value++;
}
</script>

在 Chrome（版本 102.0.5005.61（官方版本）（64 位））中，我收到以下错误，页面上未显示任何内容：无法加载模块脚本：预期为 JavaScript 模块脚本，但服务器响应的 MIME 类型为“application/octet-stream”。根据 HTML 规范，对模块脚本强制执行严格的 MIME 类型检查。

我读到，如果浏览器不知道它是什么类型，它将以“application/octet-stream”响应，但是如果您将脚本的类型指定为模块，为什么浏览器不知道它是什么类型？

我确实搜索过为什么会出现此错误，但找不到答案。我也看了很多例子，似乎我的代码中没有错误。

请问为什么我会收到此错误，我该如何修复它？

Answer 1

您的 Web 服务器使用不正确的 Content-Type HTTP 标头将文件提供给浏览器 - 它必须是 text/javascript ，但服务器要么发送 application/octet-stream ，要么根本不设置此 HTTP 标头。

您的 Web 服务器才是罪魁祸首 - 不是浏览器，当然也不是 Vue。Firefox 会给您类似的错误。

Answer 2

我弄清楚了，这实际上很明显，但是我从一开始就缺乏看到这一点的经验。

如果您不使用Vue Cli，则无法命名文件。不知道什么是vue文件。您必须调用它.js，所以例如这不起作用：

010233647

，但这有效

992872906

因此，我们每天都在学习。但是，我确实觉得可以改进Vuejs.s.org的文档，并且可以显示更好的示例，这些示例是完整的代码，而不仅仅是片段。初学者需要额外的帮助。

Answer 3

importmap 适合用于开发，目前还没有很好的支持。

你可以使用 nexuscode.online 等服务作为开发环境，而不必担心此类问题。