Estoy tratando de aprender Vue en profundidad, por lo que comencé desde el principio de la documentación nuevamente y trabajé de principio a fin.
Aquí está mi archivo 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>y aquí está mi archivo index.js:
import { createApp } from "vue"; import App from "./App.vue"; const app = createApp(App); app.mount("#app");y aquí está mi archivo App.vue:
<template> <button @click="increment"> {{ count }} </button> </template> <script setup> import { ref } from "vue"; const count = ref(0); function increment() { count.value++; } </script>En Chrome (versión 102.0.5005.61 (compilación oficial) (64 bits)) aparece el siguiente error y no aparece nada en la página: No se pudo cargar el script del módulo: se esperaba un script del módulo JavaScript, pero el servidor respondió con un tipo MIME de " aplicación/flujo de octetos”. Se aplica una estricta verificación de tipo MIME para los scripts de módulo según la especificación HTML.
Leí que si el navegador no sabe de qué tipo es, responderá con "aplicación/flujo de octetos", pero si especifica el tipo de secuencia de comandos como módulo, ¿por qué el navegador no sabe de qué tipo es?
Realmente he buscado por qué recibo este error, pero no puedo encontrar una respuesta. También miré muchos ejemplos y no parece que haya un error en mi código.
¿Por qué recibo este error y cómo lo soluciono?
Su servidor web está entregando el archivo al navegador utilizando un encabezado HTTP Content-Type inadecuado; debe ser text/javascript pero el servidor envía la application/octet-stream o no establece este encabezado HTTP en absoluto.
Es su servidor web el que tiene la culpa, no el navegador y ciertamente no Vue. Firefox te dará un error similar.
importmap es adecuado para el desarrollo y actualmente no tiene un buen soporte .
puedes utilizar servicios como nexuscode.online como entorno de desarrollo sin necesidad de preocuparte por este tipo de problemas.
Lo descubrí y en realidad es bastante obvio, pero me falta la experiencia para haber visto esto desde el principio.
Si no usa la CLI de Vue, no puede nombrar un archivo .vue porque el navegador no sabe qué es un archivo vue. Tienes que llamarlo .js así que, por ejemplo, esto no funciona:
<script type="module"> import { createApp } from "vue"; import app from "./app.vue"; createApp(app).mount("#app"); </script>pero esto funciona bien
<script type="module"> import { createApp } from "vue"; import app from "./app.js"; createApp(app).mount("#app"); </script>y así aprendemos todos los días. Sin embargo, creo que la documentación de vuejs.org se puede mejorar y pueden mostrar mejores ejemplos que son código completo y no solo fragmentos. Los principiantes necesitan esa ayuda adicional.