理解Umi.js中history hash模式与base配置的关系

在使用Umi.js框架开发前端应用时，路由配置是一个关键环节。特别是当我们需要将应用部署在非根目录下并使用hash路由模式时，正确理解history hash模式与base配置的关系尤为重要。

hash路由模式的基本概念

hash路由模式是前端路由的一种实现方式，它通过URL中的hash部分（即#号后面的内容）来实现页面跳转而不刷新页面。这种模式的优点在于兼容性好，可以支持较老版本的浏览器。

base配置的作用

base配置项用于指定应用部署的基础路径。当我们的应用不是部署在服务器根目录下时，比如部署在/myapp/目录下，就需要设置base为/myapp/。

常见误区

很多开发者会误以为在hash模式下，base路径应该出现在hash部分之前。实际上，在hash路由模式下，base路径是包含在hash部分内的。这是因为hash路由的本质决定了整个路由逻辑都是在hash部分实现的。

实际配置方案

对于需要在非根目录部署且使用hash路由模式的应用，正确的做法是：

1. 配置history类型为hash
2. 设置publicPath为部署目录路径
3. 不需要特别处理base配置，因为hash路由会自动处理这部分逻辑

最佳实践

在Umi.js项目中，推荐使用以下配置：

// config/config.js
export default {
  history: {
    type: 'hash',
  },
  publicPath: '/your-sub-path/',
  // 其他配置...
}

这样配置后，应用的静态资源路径和路由都能正确指向子目录，同时保持hash路由的特性。

通过理解这些配置项之间的关系，开发者可以更灵活地部署Umi.js应用，满足各种部署环境的需求。