前言
Vite是一个快速的现代化前端构建工具，它提供了快速的开发体验和高效的打包能力。在本教程中，我们将学习如何使用Vite实现多页面打包，让你的应用能够拥有多个独立的页面。
步骤1：创建页面文件夹
首先，在你的项目根目录下创建一个名为pages的文件夹。这个文件夹将用于存放每个页面的入口文件和模板文件。
步骤2：配置页面入口和模板
在pages文件夹中，为每个页面创建一个子文件夹，例如page1和page2。在每个子文件夹中，分别创建一个名为main.js的入口文件和一个名为index.html的模板文件。
入口文件（main.js）是每个页面的入口点，它将负责导入对应的Vue应用和模板文件，并创建Vue实例。
模板文件（index.html）是每个页面的HTML模板，它定义了页面的结构和容器元素。
步骤3：配置Vite
在Vite的配置文件（vite.config.js）中进行多页面打包的配置。使用rollupOptions.input选项来指定每个页面的入口文件路径。
例如，如果你有两个页面page1和page2，配置如下：
import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({
build: {
rollupOptions: {
input: {
page1: resolve(__dirname, 'pages/page1/main.js'),
page2: resolve(__dirname, 'pages/page2/main.js'),
}
}
}
})
;
步骤4：编写页面代码
在每个页面的入口文件（main.js）中，导入对应的Vue应用和模板文件，并创建Vue实例。例如：
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
在每个页面的模板文件（index.html）中，添加对应的容器元素。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page 1</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
步骤5：运行打包
完成以上步骤后，现在你可以运行Vite来构建你的多页面应用了。使用命令行切换到项目根目录，然后运行以下命令：
vite build
Vite将根据配置文件中的多页面设置，将每个页面打包为独立的文件。你可以在输出目录中找到打包后的文件。
总结
通过按照以上步骤，你可以使用Vite轻松地实现多页面打包。创建页面文件夹，配置页面入口和模板，编写页面代码，并在Vite配置文件中进行配置。最后，运行Vite构建命令，即可生成多个独立的页面文件。
标签：文件,教程,js,文件夹,Vite,模板,页面 From： https://blog.51cto.com/u_15718546/8752351