vite多页面配置入口，和开发环境server配置

vite-vue3，使用了两个入口html，需要配置一下vite.config

官网配置

比如改入口文件为app.html,配置如下，

build: {
    rollupOptions: {
      input: 'app.html',
    },
 },

但是按如上配置改动后，开发运行npm run dev 后，启动的还是index.html

自定义插件

Vite插件提供了一个配置开发服务器的特有钩子，我们在这个阶段介入到开发服务器配置，去实现想要的功能，时需要一个包 connect-history-api-fallback

安装 npm i connect-history-api-fallback 在vite.config.js下引入

import history from 'connect-history-api-fallback'
...
plugins: [
  {
    name: 'vite-plugin-history',
    configureServer(server) {
      server.middlewares.use(history({
        rewrites: [
          // @from 是匹配路由规则，这里是匹配所有路由都会跳转到app.html,
          // 类似nginx配置的 try_files $uri $uri/ /dev.html;
          // @to app.html 在根目录下，目录变动的话，需要配置
          { from: /.*/, to: '/app.html' } 
        ],
        htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
      }))
    }
  }
]