Vite 开发服务器中的自定义 URL（多页面应用程序）

我正在构建一个多页面应用程序Vite https://vitejs.dev/（从 Webpack 迁移）。

要在开发服务器中打开登录页面，我必须转到：localhost:3010/login.html

是否可以调整 Vite 配置来提供 login.html，其 URL 如下：localhost:3010/login（没有.html）？

// vite.config.js excerpt

export default {
  build: {
    rollupOptions: {
      input: {
        index: new URL('./index.html', import.meta.url).pathname,
        login: new URL('./login.html', import.meta.url).pathname,
      }
    }
  },
  server: {
    port: 3010,
    proxy: {
      '/api': 'http://localhost:5000/',
    },
  },
};

使用 Vite 插件配置 Vite 开发服务器configureServer(server) https://vitejs.dev/guide/api-plugin.html#configureserverAPI。那个方法的server参数是一个ViteDevServer https://vitejs.dev/guide/api-javascript.html#vitedevserver, whose middlewares财产是基础Connect实例 https://github.com/senchalabs/connect. Call middlewares.use() https://github.com/senchalabs/connect#appusefn使用充当自定义中间件的方法。

这是一个配置开发服务器以替换的基本插件/login with /login.html，添加到plugins array https://vitejs.dev/config/#plugins在Vite配置中：

import { defineConfig } from 'vite'

const LoginHtmlFallbackPlugin = {
  name: 'login-html-fallback',
  configureServer(server) {
    server.middlewares.use('/login', (req, res, next) => {
      req.url += '.html'
      next()
    })
  }
}

export default defineConfig({
  plugins: [
    LoginHtmlFallbackPlugin
  ],
})

demo 1 https://stackblitz.com/edit/vite-dev-server-html-fallback-ea9csb?file=vite.config.ts

以及一个更动态的插件，可以回退到相应的.html文件（附加.html仅当存在时才指向无扩展名的 URL：

// build/plugins/html-ext-fallback.js
import path from 'path'
import fs from 'fs'

export default (options) => ({
  name: 'html-ext-fallback',
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      // Check extensionless URLs but ignore the `/` root path
      if (req.originalUrl.length > 1 && !path.extname(req.originalUrl)) {
        if (fs.existsSync(path.join(options.rootDir, `${req.originalUrl}.html`))) {
          req.url += '.html'
        }
      }
      next()
    })
  }
})

// vite.config.js
import { defineConfig } from 'vite'
import HtmlExtFallbackPlugin from './build/plugins/html-ext-fallback'

export default defineConfig({
  plugins: [
    HtmlExtFallbackPlugin({ rootDir: __dirname })
  ],
})

demo 2 https://stackblitz.com/edit/vite-dev-server-html-fallback?file=vite.config.ts