如何解决Vite/Vue项目中URL含句点导致的404问题？

这不是Vite的Bug，而是Vite与Webpack开发服务器的默认设计差异导致的：

• Vite开发服务器默认会将包含句点的URI视为静态资源请求，直接去文件系统中查找对应文件，找不到就返回404。
• Vue CLI+Webpack的devServer则默认对所有路由请求做SPA fallback，将非静态资源请求转发到index.html，适配单页应用的路由规则。

解决方法 #

1. 配置SPA路由Fallback（推荐）

在项目根目录的vite.config.ts中添加自定义的historyApiFallback规则，让带句点的路由请求也转发到index.html：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    historyApiFallback: {
      rewrites: [
        // 匹配所有包含句点的路径，转发到index.html
        { from: /\./, to: '/index.html' }
      ]
    }
  }
})

2. 关闭文件系统严格校验（不推荐）

通过关闭Vite的文件系统严格检查，可以让Vite不对静态资源路径做严格校验，但这种方式存在安全风险，不建议在生产环境使用：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    fs: {
      strict: false
    }
  }
})

生产环境注意事项 #

如果项目构建后部署到服务器，需要确保服务器配置了SPA fallback规则。比如使用Nginx时，要在配置中添加：

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

否则生产环境中带句点的路由依然会返回404。

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