如何在Quasar(Vue3)中使用vite-plugin-rewrite-all解决路径含点问题？

问题背景 #

• Quasar+Vite环境，vueRouterMode设为history模式
• 当路由匹配thing/:id（id包含点号，比如thing/abc.123）时，页面返回404
• 根源是Vite默认将带点号的路径识别为静态资源，不会转发给Vue Router处理

解决方案：使用vite-plugin-rewrite-all插件 #

这个插件可以统一重写路由规则，解决带点号参数的匹配问题，但在Quasar的quasar.config.js中直接引入会遇到ES模块兼容问题，按以下步骤处理：

1. 动态引入插件 #

quasar.config.js属于CommonJS模块，无法直接用import或require引入纯ES模块的插件，改用动态import方式：

// quasar.config.js
module.exports = configure(function (ctx) {
  return {
    // 保留其他原有配置
    vite: {
      plugins: [
        // 动态加载并初始化插件
        (async () => {
          const pluginModule = await import('vite-plugin-rewrite-all');
          return pluginModule.default();
        })()
      ]
    }
  }
})

2. 验证效果 #

启动开发服务后，访问带点号参数的路由（例如/thing/user.1001），确认页面正常加载，不再返回404。

替代方案：手动配置Vite路由重写 #

如果不想额外安装插件，也可以直接在quasar.config.js中配置Vite的服务器重写规则：

// quasar.config.js
module.exports = configure(function (ctx) {
  return {
    // 保留其他原有配置
    vite: {
      server: {
        rewrite: {
          // 匹配所有以/thing/开头的路径，转发给Vue Router
          '^/thing/(.+)': '/thing/$1'
        }
      },
      // 生产环境构建时确保路由 fallback 正常
      build: {
        rollupOptions: {
          output: {
            manualChunks: undefined
          }
        }
      }
    }
  }
})

注意：生产环境部署时，需要确保服务器配置了SPA fallback规则（比如Nginx中设置try_files $uri $uri/ /index.html;），否则刷新页面仍会出现404。

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