如何解决Vite.js中移除URL HTML扩展名后跳转至index.html的问题？

问题原因 #

Vite开发服务器默认仅识别带.html扩展名的文件请求，无扩展名的路径会被当作SPA路由请求。如果项目未配置对应路由规则，服务器会默认 fallback 到index.html，导致跳转异常。

解决步骤 #

1. 开发环境配置（修改vite.config.js） #

在vite.config.js中添加自定义中间件，自动将无扩展名的请求重写到带.html的路径：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        // 排除静态资源、API请求和根路径
        if (!req.url.match(/\.\w+$/) && req.url !== '/') {
          req.url += '.html'
        }
        next()
      })
    }
  }
})

配置后，开发环境中访问/click会自动映射到/click.html，页面可正常加载。

2. 生产环境配置 #

打包部署后，需根据服务器类型配置规则，让服务器自动解析无扩展名的路径到对应HTML文件：

Nginx配置

在站点配置中添加：

location / {
  try_files $uri $uri.html $uri/ /index.html;
}

Apache配置

在项目根目录创建.htaccess文件，写入：

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ $1.html [L]

内容的提问来源于stack exchange，提问作者user3378613