首页vue3用webpack和vite的 index.html

vue3用webpack和vite的 index.html

时间: 2024-10-03 19:03:52 浏览: 51

Vue3项目通常可以使用Webpack或Vite作为构建工具来处理前端模块化和打包。对于这两种构建工具生成的`index.html`文件，它们都有相似的目的——提供静态资源引用、设置基本的HTML结构以及初始化应用。 **Webpack项目中的`index.html`**： Webpack通过`html-webpack-plugin`插件自动生成`index.html`。这个文件可能会包含如下内容： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <div id="app"></div> <script src="js/bundle.js"></script> </body> </html> ``` 其中`css/app.css`和`js/bundle.js`分别是Webpack通过模块加载器提取并合并后的CSS和JavaScript文件。 **Vite项目中的`index.html`**： Vite是一个更现代的构建工具，它会实时热更新并且不需要显式的构建步骤。`vite.config.js`配置文件里，Vite会自动创建一个`public`文件夹，生成的`index.html`就在这个文件夹下，类似于这样的结构： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html> ``` Vite在这里直接引用了`main.js`，它是你的主入口点，包含了Vue应用的启动代码。

阅读全文