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

Question

我正在使用Vite构建一个多页面应用程序（从 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/',
    },
  },
};

Answer 1

使用 Vite 插件的 API 配置 Vite 开发服务器configureServer(server)。该方法的server参数是 a ViteDevServer，其middlewares属性是基础Connect实例。middlewares.use()使用充当自定义中间件的方法进行调用。

这是一个基本插件，它将开发服务器配置为替换为/login，/login.html添加到Vite 配置中的plugins数组中：

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
  ],
})

演示1

还有一个更动态的插件，仅当相应文件存在时才会回退到该.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 })
  ],
})

演示2