Intentando crear mi primera aplicación vite.js. después de inicializar el proyecto e instalar las dependencias, edité index.html para mostrar un hola mundo normal, otros archivos los dejé vacíos.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- <link rel="icon" type="image/svg+xml" href="favicon.svg" /> --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hello Wolrd</title> </head> <body> <div id="app"> <script type="module" src="./main.js"></script> <h1>Hello Wolrd</h1> </div> </body> </html>Sin embargo, edito index.html style.css o main.js, el host local sigue mostrando la página de bienvenida de vite.js, así que inspeccioné la página y parece que todavía usa la plantilla de ruta de la caldera:
EDIT:
alguien comentó que main.js es el punto de entrada de vite.js que también edité para mostrar un simple hola mundo sin pensarlo mucho...
import './style.css' document.querySelector('#app').innerHTML = ` <h1>Hello World!</h1> ` Esta es mi jerarquía de archivos:
¿Si necesita más información, hágamelo saber?
EDIT 2:
Estaba usando MacOs mojave versión 10.14.6. Cambié a otro Imac con el mismo sistema operativo y versión y funcionó...
En main.js verás:
document.querySelector('#app').innerHTML = ` <h1>Hello Vite!</h1> <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a> ` Que reemplaza todo lo que está en <div id="app"></div>
Con
<div id="app"> <h1>Hello Vite!</h1> <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a> </div> Vite bundler está colocando/arreglando el <script> al final antes del cuerpo porque está en el lugar equivocado.
Si quieres Hello World! entonces deberías cambiar el contenido en main.js
document.querySelector('#app').innerHTML = ` <h1>Hello World!</h1> `