如何实现 Vite 的多页面应用（MPA）？

在 Vite 中实现多页面应用（MPA）可以通过配置多个入口点来实现。以下是详细步骤和配置说明：

1. 项目结构

假设项目结构如下：

multi-page-app/
├── public/
├── src/
│   ├── pages/
│   │   ├── page1/
│   │   │   ├── index.html
│   │   │   ├── main.js
│   │   │   └── style.css
│   │   ├── page2/
│   │   │   ├── index.html
│   │   │   ├── main.js
│   │   │   └── style.css
│   └── shared/
│       └── utils.js
├── vite.config.js
└── package.json

2. 配置多入口点

在 vite.config.js 中配置多个入口点。

示例：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        page1: path.resolve(__dirname, 'src/pages/page1/index.html'),
        page2: path.resolve(__dirname, 'src/pages/page2/index.html'),
      },
    },
  },
});

3. 创建 HTML 文件

在每个页面的目录下创建 index.html 文件。

src/pages/page1/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>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="app"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

src/pages/page2/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 2</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="app"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

4. 编写 JavaScript 和 CSS 文件

在每个页面的目录下编写 main.js 和 style.css 文件。

src/pages/page1/main.js：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

src/pages/page1/style.css：

body {
  background-color: lightblue;
}

src/pages/page2/main.js：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

src/pages/page2/style.css：

body {
  background-color: lightgreen;
}

5. 共享代码

可以在 src/shared/ 目录下编写共享的 JavaScript 模块。

src/shared/utils.js：

export function sharedFunction() {
  console.log('This is a shared function');
}

在页面中引入共享模块：

import { sharedFunction } from '../shared/utils.js';

sharedFunction();

6. 启动开发服务器

启动开发服务器：
```
npm run dev
```
访问 http://localhost:5173/page1/index.html 和 http://localhost:5173/page2/index.html 查看不同页面。

7. 构建生产环境

构建生产环境代码：
```
npm run build
```
构建结果会在 dist 目录下生成 page1/index.html 和 page2/index.html。

示例：完整的 Vite 多页面应用配置

以下是一个完整的 vite.config.js 文件示例，包含多页面应用的配置：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        page1: path.resolve(__dirname, 'src/pages/page1/index.html'),
        page2: path.resolve(__dirname, 'src/pages/page2/index.html'),
      },
    },
  },
});

总结

通过配置多个入口点和创建多个 HTML 文件，可以在 Vite 中实现多页面应用（MPA）。合理组织项目结构和共享代码，可以提升开发效率和代码复用性。

Vite 多页面应用 MPA 入口点 HTML 文件 Rollup 共享代码

学在每日，进无止境！更多精彩内容请关注微信公众号。

原文出处：内容由AI生成仅供参考，请勿使用于商业用途。如若转载请注明原文及出处。

出处地址：http://www.07sucai.com/tech/898.html

博客站