标签： umijs

宝塔部属umijs/max/node项目

umijs/max或者node项目，用npm build生成dist文件夹，把dist文件夹传到宝塔网站wwwroot文件夹下。

宝塔安装nodejs管理器。

网站，node项目，先安装node版本，添加node项目。

项目目录：/www/wwwroot

dist是上传的文件夹名，启动命令：serve dist

项目端口：3000

保存配置，然后点新加的网站，点名称进入网站设置。

模块管理，输入serve，安装模块。

服务状态启动服务就可以访问已绑定的域名了。

umijs max React 的代码打包多份再运行react找不到问题

mf-dep____vendor.80125e40.js:263462 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Uncaught TypeError: Cannot read properties of null (reading ‘useContext’)

根因在某些复杂场景下，React 的代码被打包多份，再运行时产出了多个 React 实例。解法通过 Module Feratation 的 shared 配置来避免多实例的出现。 如果有其他依赖出现多实例的问题，可以通过类似的方式解决。

在config/config.ts文件里加mfsu的配置

mfsu: {
  shared: {
    react: {
      singleton: true,
    },
  },
},

Umi Max 国际化使用

ReactElement内使用

import { FormattedMessage } from '@umijs/max';
<FormattedMessage id="project.tunnel.label" />

函数内使用

import { useIntl } from '@umijs/max';
const AppLayout = ({ children, version }: any) => {
  const intl = useIntl();
  const msg = intl.formatMessage({ id: 'project.menu.draw.index' });
}

外部文件使用

import { getIntl, getLocale } from '@umijs/max';
const intl = getIntl(getLocale());
message.error(intl.formatMessage({ id: error.response.data.message}));

injectIntl还没遇到需要的地方，暂时不了解用法。