umi 部署html到非根目录下

umi 部署html到非根目录下

问题的抛出：

​ 在公司项目中需要做一个H5页面放到一个网站上，访问名称为xxxxxxxxx/secssc,我使用的是umi框架，默认的是把H5页面放在根目录下的情况，在此我给出解决办法以及走过的一些坑。

解决步骤：

​ 我是在.umirc.ts目录下进行路由的配置，如果没有这个文件可以自己新增一个，我当初umi框架搭出来的时候也没有这个文件。

​

​

1. 首先需要配置base,我是把网页部署在非根目录下secssc下，所以base: '/secssc/'，

2. PublicPath默认是/，当打包的时候，webpack 会在静态文件路径前面添加 publicPath 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 publicPath 的值设为 CDN 的值就可以。如果使用一些特殊的文件系统，比如混合开发或者 cordova 等技术，可以尝试将 publicPath 设置成 ./ 相对路径。

   我是先执行yarn run bulid把执行后的文件打开看下，发现编译后的dist文件夹里内容如下，在index.html引用umi.css文件的时候需要将引用路径改为./才能正确引用到。

   
   3. history:{type:'hash'}这个路由的配置也很重要。在配置跟路由后，每次访问都会带上secssc,导致访问不了在routes配置好的路由和文件。但是使用hash history可以很好的解决这个问题。
   

   ​ 配置好后的页面：

   

import { defineConfig } from 'umi';

export default defineConfig({
  base: '/secssc/',
  publicPath: './',
  history:{type:'hash'},
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    {
      exact: true,path:'/',component: '@/pages/homePage/index',
    },
    {
      exact: false,path:'/secondMenu',component:'@/pages/businessHandling/secondMenu'
    }
  ],
  fastRefresh: {},
  proxy: {
    '/api1': {
      target: 'http://idaas.shanghai-electric.com/dce-api/idaas-wechat/api',
      changeOrigin: true,
      pathRewrite: { '/api1': '' },
    },
  },
});

综上：

​ 经过上述步骤基本就配置好了，有问题欢迎互相交流！
},
},
});

## 综上：

​	经过上述步骤基本就配置好了，有问题欢迎互相交流！