【umi max】关于umi构建的项目在本地服务运行正常，但是部署时无致命报错却白屏，html文档的#root容器没有子元素的原因及解决办法

我们在部署时运维很可能会因为项目太多，进而放到不同的目录底下，例如project/H5-TEST-DEMO

（其中project是项目的存放目录，而H5-TEST-DEMO才是我们部署的项目根目录）于是乎就会出现我们在本地服务里调试得好好的，但是一打包部署就白屏。

分析下原因：

因为umi在非人工干预修改目录结构的情况下，路由是按照默认路由规则生成的，这其中就包括了默认生成html的规则，默认是src/pages其对应基础访问路径也会默认是/（PS：这个和publicPath不是同一个概念，publicPath是修改打包后存放静态资源的路径），此时我们将项目打包出dist，并且部署到H5-TEST-DEMO目录，会出现白屏，因此基础路径不再是/，而应该是/H5-TEST-DEMO/，因为内层套了一层目录H5-TEST-DEMO，因此需要追加path至完整路径。

PS：之所以#root容器没有被注入子元素，就是因为路由没匹配上，SPA的规则就是页面路由匹配再去加载对应页面的内容并注入到#root元素，此并非nginx的问题，如果Nginx出了问题，那么根路由是访问不进来的，也就查不了element元素

解决办法：

javascript 复制代码

export default defineConfig({
    antd: {},
    base: '/H5-TEST-DEMO/', // 重点是改这个！！！
    // dva: {},
    model: {},
    initialState: {},
    request: {},
    locale: {
        default: 'zh-CN',
        baseSeparator: '-',
        useLocalStorage: true
    },
    favicons: ['/favicon.ico'],
    devtool: !isDevelopment() ? false : 'source-map',
    define: {
        APP_TYPE: process.env.APP_TYPE || '',
        ENV: process.env.ENV || '',
        PLATFORM: getPlatform(),
        'process.env.APP_ENV': process.env.APP_ENV,
        'process.env.APP_AREA': process.env.APP_AREA
    },
    theme: {
        'primary-color': '#5590F6',
        'layout-footer-background': '#F8F9FD'
    },
    alias: {
        '@configs': './configs/'
    },
    routes,
    npmClient: 'yarn',
    links: [
        { href: '//wx-h5-assets.oss-test.aliyuncs.com', rel: 'dns-prefetch' },
    ],
    headScripts,
    scripts: [
        // {
        //     src: 'https://wx-tech-test-buckets.oss-okk.aliyuncs.com/area.js',
        //     defer: true
        // }
    ],
    metas: [
        {
            name: 'viewport',
            content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'
        }
    ],
    codeSplitting: {
        jsStrategy: 'granularChunks'
    },
    esbuildMinifyIIFE: true,
    hash: true,
    targets: {
        safari: 13,
        chrome: 80
    },
    ...(publicPath ? { publicPath } : {}),
    // presets: ['./plugin/print', './plugin/buildVersion'],
    // plugins: ['./plugin/watchFiles', './plugin/collectI18nKey', './plugin/modifyHtml', './plugin/modifyTSConfig'],
    // watchFiles: [LOCALES_SCRIPT_PATH],
    proxy: {
        '/api': {
            target: serverOrigin,
            changeOrigin: true
        }
    },
    ...(process.env.DEAD_CODE
        ? {
              deadCode: {
                  patterns: ['src/**'],
                  exclude: ['src/.umi.*/**', 'src/chat/**', 'src/wfc-util/**', 'src/**/*.md', 'src/**/*.mdx', 'src/**/*.d.ts', 'src/assets/oaicons/**'],
                  detectUnusedFiles: true,
                  detectUnusedExport: true
              }
          }
        : {}),
    jsMinifier: 'esbuild',
    jsMinifierOptions: {
        drop: isProduction() ? ['console', 'debugger'] : []
    },
    chainWebpack(config) {
        // @ts-ignore
        const cacheGroups = config.optimization.splitChunks.values().cacheGroups;
        if (cacheGroups) {
            // cacheGroups['tools'] = {
            //     name: 'tools',
            //     chunks: 'all',
            //     test: /([\\/]node_modules[\\/](moment|rc-field-form[\\/]es|query-string)[\\/])|([\\/]src[\\/]wfc-util[\\/]libs[\\/]han[\\/])/,
            //     priority: 51
            // };
            cacheGroups['antd'] = {
                name: 'antd',
                chunks: 'all',
                test: /[\\/]node_modules[\\/](antd|@ant-design[\\/]icons|ahooks)[\\/]/,
                priority: 50
            };
        }
        return config;
    }
    // mfsu: false
});