本文重点关注的是在history模式下面，vite的配置区别，其他基础的配置就省略掉了。

单页面

使用vite构建spa（Single Page Application）单页面应用是一个比较简单的事情，正如vite官网所说，在开发期间 Vite 是一个服务器，所以我们只需要在项目最外层，新建一个index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="入口文件地址.js">
  </body>
</html>

多页面

使用vite构建mpa（Multi Page Application)，官网上描述的就比较抽象了

vite很灵活，支持mpa，但是具体的没多说。假设我的项目有两个页面，我希望/a/* 都去访问pageA/index.html,我希望/b/* 都去访问pageB/index.html,文件的结构如下

└── src
    ├── pageA
    │   └── index.html
    └── pageB
        └── index.html

vite.config.js应该怎么配置呢？

server: {
    host: '0.0.0.0',
    port: 3001,
    open:'/server',
    proxy: {
      '/a': {
        target: 'http://localhost:3001',
        rewrite: () => '/src/pageA/index.html'
      },
      '/b': {
        target: 'http://localhost:3001',
        rewrite: () => '/src/pageB/index.html'
      }
    }
  },

在这里，让server的/a的路由的请求都强行转到 http://localhost:3001/src/pageA/index.html 下面，同理，对于/b下面的路由也是一样，这样就是实现了自己定义路由的多页面应用。

vite单页面和多页面的开发配置

单页面

多页面