我正在嘗試深入學習 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 型別“應用程式/八位位元組流”。根據 HTML 規范對模塊腳本強制執行嚴格的 MIME 型別檢查。
我讀到如果瀏覽器不知道它是什么型別，它將以“application/octet-stream”回應，但是如果您將腳本的型別指定為模塊，為什么瀏覽器不知道它是什么型別？
我真的搜索過為什么我會收到這個錯誤，但我找不到答案。我還查看了許多示例，我的代碼中似乎沒有錯誤。
請問為什么我會收到這個錯誤，我該如何解決？
uj5u.com熱心網友回復：
您的 Web 服務器正在使用不正確的Content-TypeHTTP 標頭向瀏覽器提供檔案 - 它必須是text/javascript，但服務器要么發送application/octet-stream，要么根本不設定此 HTTP 標頭。
應該歸咎于您的 Web 服務器 - 不是瀏覽器，當然也不是 Vue。Firefox 會給你類似的錯誤。
uj5u.com熱心網友回復：
importmap 適合開發，目前還沒有很好的支持。
您可以使用像nexuscode.online這樣的服務作為開發環境，而無需擔心此類問題。
uj5u.com熱心網友回復：
我想通了，它實際上相當明顯，但我缺乏從一開始就看到這一點的經驗。
如果您不使用 Vue CLI，則無法將檔案命名為 .vue，因為瀏覽器不知道 vue 檔案是什么。你必須呼叫它 .js 所以例如這不起作用：
<script type="module">
import { createApp } from "vue";
import app from "./app.vue";
createApp(app).mount("#app");
</script>
但這很好用
<script type="module">
import { createApp } from "vue";
import app from "./app.js";
createApp(app).mount("#app");
</script>
所以我們每天都在學習。但是我確實覺得 vuejs.org 的檔案可以改進，它們可以展示更好的示例，這些示例是完整的代碼，而不僅僅是片段。初學者需要額外的幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/484181.html
標籤：javascript Vue.js