能否基于单一代码库让Cordova用Hash Router、Web用普通路由？

完全可以基于同一代码库实现Web端用普通History路由、Cordova移动端用Hash路由的需求，下面是几个实用的落地方案：

1. 运行时判断环境切换路由模式 #

这是最直接的做法，核心就是在应用启动时判断当前是Web环境还是Cordova环境，然后加载对应的路由配置：

具体操作 #

• 先写个简单的环境判断逻辑：

  // 判断是否在Cordova容器里运行
  const isCordova = !!window.cordova || !!window.phonegap;
  

• 然后根据环境选路由模式（以Vue Router和React Router为例）：
  Vue Router：

  import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
  import routes from './routes';
  
  const router = createRouter({
    // Cordova用Hash模式，Web用History模式
    history: isCordova ? createWebHashHistory() : createWebHistory(),
    routes
  });
  

  React Router：

  import { BrowserRouter, HashRouter } from 'react-router-dom';
  import RoutesConfig from './RoutesConfig';
  
  const AppRouter = () => {
    const isCordova = !!window.cordova || !!window.phonegap;
    return isCordova ? (
      <HashRouter>
        <RoutesConfig />
      </HashRouter>
    ) : (
      <BrowserRouter>
        <RoutesConfig />
      </BrowserRouter>
    );
  };
  

• 注意：Cordova打包时，config.xml里的入口页面要设为index.html，不然路由跳转可能出问题。

2. 构建阶段用环境变量指定路由模式 #

如果不想在运行时做判断，也可以在构建阶段就确定路由模式，通过构建工具的环境变量实现：

具体操作 #

• 先在package.json里加两个构建命令：

  "scripts": {
    "build:web": "vite build",
    "build:cordova": "vite build --mode cordova"
  }
  

• 然后在路由配置里读取环境变量（以Vite为例）：

  import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
  import routes from './routes';
  
  const router = createRouter({
    history: import.meta.env.MODE === 'cordova' ? createWebHashHistory() : createWebHistory(),
    routes
  });
  

• 打包Cordova应用时，先跑npm run build:cordova，再把构建好的文件复制到Cordova的www目录就行。

3. 统一路由路径的小技巧 #

不管用哪种模式，建议所有路由的path都写成/user/profile这种格式——路由库会自动在Hash模式下转成#/user/profile，不用手动改路径字符串，这样路由配置能完全复用，省得维护两套路径。

另外提个注意点：Web端用History模式时，服务器要配置重定向规则（比如Nginx里加try_files $uri $uri/ /index.html;），不然刷新页面会404；Cordova端用Hash模式就没这问题，因为Hash部分不会发给服务器。

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