元素
元素
工具
博客
问答

Vite 和 Webpack 在处理 HTML 模板时有什么区别？

司马俊贺 阅读 7
前端

我最近从 Webpack 切换到 Vite，发现 HTML 文件的处理方式好像不太一样。比如我有个简单的入口 HTML，在 Webpack 里用 HtmlWebpackPlugin 能正常注入 JS，但 Vite 好像直接读这个 HTML 作为入口？

我试了直接把原来的 HTML 放到 public 目录下，结果资源路径全错了；放 src 下又不知道怎么配置。是不是 Vite 的 HTML 入口机制和 Webpack 根本不一样？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <!-- 这里在 Webpack 里会被自动注入 bundle.js -->
</body>
</html>
构建工具配置对比
我来解答 赞 3 收藏
二维码
手机扫码查看
反馈
1 条解答
A. 爱玲
A. 爱玲 Lv1
这感觉确实不一样，因为两者的设计理念根本就是反着的。Webpack 是以 JS 为入口，最后把 JS 注入到 HTML 里；Vite 是以 HTML 为入口，靠 HTML 去加载 JS。

你之前把 HTML 放 public 目录下，那是纯静态资源目录，Vite 开发服务器只会原封不动地拷贝文件，根本不经过构建处理，路径当然全错了。放 src 下也不是标准解法，Vite 默认就是把入口 HTML 放在项目根目录，也就是跟 package.json 同级的地方。

一般这样处理：把你的 HTML 文件移到项目根目录。然后在 HTML 里手动写上 script 标签，指向你的 JS 入口文件。

代码大概长这样：







  

  My App


注意看那个 。在 Webpack 里你不需要写这个，因为插件会帮你加。但在 Vite 里，这是必须的，而且路径必须是绝对路径 / 开头（指向根目录）。Vite 开发服务器看到这个标签，就会去处理 /src/main.js 并开始构建依赖图。打包的时候 Vite 也会自动把这个路径替换成打包后的文件名，所以不用担心上线后的路径问题，写死 /src/main.js 就行。

总结一下就是：别想着用插件自动注入了，把 HTML 拿到根目录，老老实实加上
相关推荐
元素
元素
工具
博客
问答
登录/注册