时间戳

首页 > 解决方案 > Vite 开发服务器中的自定义 URL（多页面应用程序）

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

问题描述

我正在使用Vite构建一个多页面应用程序（从 Webpack 迁移）。

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

是否可以调整 Vite 配置以使用 URL 为 login.html 提供服务：（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/',
    },
  },
};

标签： javascriptreactjsvite

解决方案

configureServer(server)使用 Vite 插件的API配置 Vite 开发服务器。该方法的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

推荐阅读