umi项目部署在非根目录下，打开空白页的问题

umi项目部署在非根目录下，打开空白页的问题

​ 在用umi作为前端框架部署项目的时候，执行指令 yarn run build生成dist文件，然后将该文件放在站点上，访问该站点就能访问这个网页了。一切照做但是却发现了一些问题，踩坑好久终于解决。

​ 出现这种都是空白页的，其实是样式文件和JS脚本没有请求到所导致的。原因是umi默认你build后的文件都是放在更目录里面，但是实际情况是可能有些网页你需要放在已经建好的站点里面作为子目录来进行请求，这样路径不对自然就请求 不到了。

可以看下打包后的文件。根据后缀名可以显然看出这几个文件不同的作用。

打开.html文件，观察花圈的部分有什么不同。默认window.routerBase是“/”，但是这是在根目录下的情况。实际情况是我把这些文件放在了根目录下的secssc的文件夹里面，所以对于该网页而言，页面的请求应该从/secssc该目录下请求。包括同目录下样式文件的请求，最好也是用相对路径"./"，来请求，否则样式是加载不出来的。

但是总不能在build后的.html文件里面来进行修改吧，如果这样倒是显得很蠢也很麻烦。

打开代码里面的.umirc.ts文件，在这里进行相关默认配置的更改。

import { defineConfig } from 'umi';

export default defineConfig({
 //base参数，部署到非根目录时才需配置,我的理解就是现在base里面的文件就是相对于现在的网页而言实际上的根目录，文件都从这里开始请求
  base:'/secssc/',
 // publicPath，打包的时候会在静态文件前面加上public的值。
  publicPath:'./',

  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
});

至此，现在请求网页就可以了。

以了。

[外链图片转存中…(img-LdcqHv8M-1631776864430)]