Vue3 + Vite 多页面配置

对于使用 Vue3 和 Vite 进行多页面配置，你可以按照以下步骤进行操作：

1. 首先，确保你已经安装了 Vue CLI。如果没有安装，可以使用以下命令进行安装：

npm install -g @vue/cli

2. 创建一个新的 Vue 项目，使用以下命令：

vue create my-project

3. 在创建项目时，选择手动配置选项，然后选择你需要的特性。

4. 进入项目目录，并安装 Vite 作为开发服务器，使用以下命令：

cd my-project
npm install vite --save-dev

5. 在项目根目录下创建一个 `vite.config.js` 文件，并配置多页面选项。示例如下：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        page1: 'src/page1/main.js',
        page2: 'src/page2/main.js',
      }
    }
  }
});

上述配置中，我们使用 `rollupOptions.input` 来指定每个页面的入口文件。

6. 在 `src` 目录下创建 `page1` 和 `page2` 文件夹，并分别在每个文件夹内创建一个 `main.js` 文件作为页面的入口文件。

7. 在 `src/page1/main.js` 和 `src/page2/main.js` 中编写你的页面代码。

8. 在 `package.json` 文件中修改 `scripts` 部分，添加以下命令：

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

9. 运行开发服务器，使用以下命令：

npm run dev

10. 在浏览器中访问 `http://localhost:3000/page1` 和 `http://localhost:3000/page2`，分别查看你的多页面应用。

通过以上步骤，你就可以使用 Vue3 和 Vite 进行多页面配置了。每个页面都有自己的入口文件和独立的代码，并且可以在开发服务器中进行实时预览和调试。