Vite.js 修改后仍然使用锅炉部件模板？答案

【问题标题】：Vite.js still using boiler part templates even after modification?Vite.js 修改后仍然使用锅炉部件模板？
【发布时间】：2022-01-13 15:12:35
【问题描述】：

尝试创建我的第一个 vite.js 应用程序。在初始化项目并安装依赖项后，我编辑了 index.html 以显示正常的 hello world，其他文件我将它们留空。

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>

但是我编辑 index.html style.css 或 main.js ，本地主机只是继续显示来自 vite.js 的欢迎页面，所以我检查了该页面，它看起来仍然使用锅炉路径模板：

EDIT:

有人评论说 main.js 是我编辑的 vite.js 的入口点，以显示一个简单的 hello world 以不费吹灰之力......

import './style.css'

document.querySelector('#app').innerHTML = `
  <h1>Hello World!</h1>
`

这是我的文件层次结构：

如果您需要更多信息，请告诉我？

EDIT 2:

我使用的是 MacOs mojave 版本 10.14.6 我换了另一个具有相同操作系统和版本的 Imac 并且它工作...

【问题讨论】：

标签： javascript frontend vite

【解决方案1】：

在main.js 你会看到：

document.querySelector('#app').innerHTML = `
  <h1>Hello Vite!</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
`

替换<div id="app"></div>中的所有内容

有

<div id="app">
  <h1>Hello Vite!</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
</div>

Vite bundler 将 <script> 放置/修复在正文之前的末尾，因为它的位置错误。

如果你想要Hello World!，那么你应该更改main.js中的内容

document.querySelector('#app').innerHTML = `
  <h1>Hello World!</h1>
`

【讨论】：

是的，代码的最后一个 sn-p 正是我所做的，我也将 script 标签放在 index.html 的 head 标签中，但它仍然加载初始锅炉路径。跨度>
对我有用，也许你保存了错误的文件：stackblitz.com/edit/…
肯定不是，看看我上面的文件层次结构。
@home，你确定你没有停止开发服务器吗？尝试重新启动它。（例如：停止发球，即使它看起来很活跃，然后重新开始）。另一个可能的原因：您实际上没有保存更改。 HMR 仅在您保存文件时提取更改，而不是在您输入文件时提取。
是的，也尝试一下，我再次检查了资源，它肯定使用了 index.html main.js 和 style.css 的旧锅炉部件，ibb.co/z4ZB42M