当前位置：首页 > news >正文

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

news 2025/7/8 2:27:24

我们在部署时运维很可能会因为项目太多，进而放到不同的目录底下，例如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元素

解决办法：

在这里插入图片描述

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-ignoreconst 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
});