Estoy creando una aplicación de varias páginas con Vite (migrando desde Webpack).
Para abrir la página de inicio de sesión en el servidor de desarrollo, tengo que ir a: localhost:3010/login.html
¿Es posible modificar la configuración de Vite para servir login.html con la URL como: localhost:3010/login (sin .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/', }, }, };Configure el servidor de desarrollo de Vite con la API configureServer(server) del complemento de Vite. El argumento del server de ese método es un ViteDevServer , cuya propiedad de middlewares es la instancia subyacente de Connect . Llama a middlewares.use() con un método que actúa como un middleware personalizado.
Aquí hay un complemento básico que configura el servidor de desarrollo para reemplazar /login con /login.html , agregado a la matriz de plugins en la configuración de 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 ], }) Y un complemento más dinámico que recurre a un archivo .html correspondiente (que agrega .html a URL sin extensión) solo si existe:
// 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 }) ], })