0
280
ViewsVite.js still using boiler part templates even after modification?
Trying to create my first vite.js app. after initializing the project and installing the dependencies i edited index.html to show a normal hello world, other files i left them empty.
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>
However i edit index.html style.css or main.js , the localhost just keep showing the welcome page from vite.js, so i inspected the page and it looks like it still using the boiler-path template:
EDIT:
someone commented that main.js is the entry point of vite.js i edited too to show a simple hello world to no brainer...
import './style.css'
document.querySelector('#app').innerHTML = `
<h1>Hello World!</h1>
`
This is my files hierarchy:
if you need any more info let me know?
EDIT 2:
I was using MacOs mojave version 10.14.6 I changed to another Imac with the same os and version and it worked ...
1 answers
Answer question0
In main.js you will see:
document.querySelector('#app').innerHTML = `
<h1>Hello Vite!</h1>
<a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
`
Which replaces all which is in <div id="app"></div>
With
<div id="app">
<h1>Hello Vite!</h1>
<a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
</div>
Vite bundler is placing/fixing the <script> at the end before body because its in the wrong place.
If you want Hello World! then you should change the content in main.js
document.querySelector('#app').innerHTML = `
<h1>Hello World!</h1>
`