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 插件的

configureServer(server)

API 配置 Vite 开发服务器。该方法的

server

参数是

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

Answer 2

正如 Rafael 指出的，重写 URL 会破坏该页面的 HMR 功能。但是，使用重定向不会：

//req.url += '.html'
res.writeHead(301, { Location: `${req.url}.html` })

在开发过程中您将得到一个“丑陋”的 URL，但您可以在生产服务器上恢复 URL 重写（因为那时不需要 HMR）。

Answer 3

我遇到了类似的问题，并通过向位于 public/env/config.js （和 config.testing.js）中的配置文件添加多个链接来解决它。

要将多个链接添加到同一环境，您可以在 VITE_APP_UI_URL 变量中指定它们，并用逗号分隔每个 URL。这种方法允许您在同一环境中轻松配置多个链接。

在此输入图片描述