最新版本的Ant Design Pro不支持小米饭 小米饭是基于um3来允许的 4版本不支持了
node版本推荐使用16版本 不修改版本也行 后面会说解决方案
卸载原先的版本
npm uninstall -g @ant-design/pro-cli
下载Ant Design Pro的链接
npm i @ant-design/pro-cli@3.1.0 -g
这个版本可以选择 Umi3 注意 一定要下载Umi3版本 不然不支持 Umi Ui
下好之后选择一个文件夹创建命令
pro create myapp
进入文件并安装依赖
cd myapp && npm install
下好之后 下载组件
yarn add @umijs/preset-ui -D
然后就可以直接运行项目
关于版本大于16以上的问题
由于 Node.js 版本升级后默认的 OpenSSL 配置不再支持某些加密算法。这个问题常见于使用 Webpack 5 的项目,在 Node.js v17 或更高版本中,因为默认禁用了旧的 OpenSSL 算法。
解决方法 如果下载的是我上面的那个版本
npm i @ant-design/pro-cli@3.1.0 -g
可以直接复制
通过设置 NODE_OPTIONS=--openssl-legacy-provider
来解决这个问题,这样可以启用对旧加密算法的支持。可以在启动或构建命令之前设置这个选项。并修改package.json 文件
json
{
"name": "ant-design-pro",
"version": "5.2.0",
"private": true,
"description": "An out-of-box UI solution for enterprise applications",
"scripts": {
"analyze": "cross-env ANALYZE=1 umi build",
"build": "SET NODE_OPTIONS=--openssl-legacy-provider && umi build",
"deploy": "npm run build && npm run gh-pages",
"dev": "SET NODE_OPTIONS=--openssl-legacy-provider && npm run start:dev",
"gh-pages": "gh-pages -d dist",
"i18n-remove": "pro i18n-remove --locale=zh-CN --write",
"postinstall": "umi g tmp",
"lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier && npm run tsc",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
"lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
"lint:prettier": "prettier -c --write \"src/**/*\" --end-of-line auto",
"lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
"openapi": "umi openapi",
"playwright": "playwright install && playwright test",
"prepare": "husky install",
"prettier": "prettier -c --write \"src/**/*\"",
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && umi-serve",
"start": "SET NODE_OPTIONS=--openssl-legacy-provider && cross-env UMI_ENV=dev umi dev",
"start:dev": "SET NODE_OPTIONS=--openssl-legacy-provider && cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev umi dev",
"start:no-mock": "SET NODE_OPTIONS=--openssl-legacy-provider && cross-env MOCK=none UMI_ENV=dev umi dev",
"start:no-ui": "SET NODE_OPTIONS=--openssl-legacy-provider && cross-env UMI_UI=none UMI_ENV=dev umi dev",
"start:pre": "SET NODE_OPTIONS=--openssl-legacy-provider && cross-env REACT_APP_ENV=pre UMI_ENV=dev umi dev",
"start:test": "SET NODE_OPTIONS=--openssl-legacy-provider && cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev umi dev",
"test": "umi test",
"test:component": "umi test ./src/components",
"test:e2e": "node ./tests/run-tests.js",
"tsc": "tsc --noEmit"
},
"lint-staged": {
"**/*.less": "stylelint --syntax less",
"**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
"**/*.{js,jsx,tsx,ts,less,md,json}": [
"prettier --write"
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
],
"dependencies": {
"@ant-design/icons": "^4.7.0",
"@ant-design/pro-components": "1.1.1",
"@umijs/route-utils": "^2.0.0",
"antd": "^4.20.0",
"classnames": "^2.3.0",
"lodash": "^4.17.0",
"moment": "^2.29.0",
"omit.js": "^2.0.2",
"rc-menu": "^9.1.0",
"rc-util": "^5.16.0",
"react": "^17.0.0",
"react-dev-inspector": "^1.7.0",
"react-dom": "^17.0.0",
"react-helmet-async": "^1.2.0",
"umi": "^3.5.0"
},
"devDependencies": {
"@ant-design/pro-cli": "^2.1.0",
"@playwright/test": "^1.17.0",
"@types/classnames": "^2.3.1",
"@types/express": "^4.17.0",
"@types/history": "^4.7.0",
"@types/jest": "^26.0.0",
"@types/lodash": "^4.14.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-helmet": "^6.1.0",
"@umijs/fabric": "^2.11.1",
"@umijs/openapi": "^1.6.0",
"@umijs/plugin-blocks": "^2.2.0",
"@umijs/plugin-esbuild": "^1.4.0",
"@umijs/plugin-openapi": "^1.3.3",
"@umijs/preset-ant-design-pro": "^1.3.0",
"@umijs/preset-dumi": "^1.1.0",
"@umijs/preset-react": "^2.1.0",
"@umijs/preset-ui": "^2.2.9",
"cross-env": "^7.0.0",
"cross-port-killer": "^1.3.0",
"detect-installer": "^1.0.0",
"eslint": "^7.32.0",
"gh-pages": "^3.2.0",
"husky": "^7.0.4",
"jsdom-global": "^3.0.0",
"lint-staged": "^10.0.0",
"mockjs": "^1.1.0",
"prettier": "^2.5.0",
"stylelint": "^13.0.0",
"swagger-ui-dist": "^4.12.0",
"typescript": "^4.5.0",
"umi-serve": "^1.9.10"
},
"engines": {
"node": ">=12.0.0"
}
}
修改之后在文件的cmd中设置
SET NODE_OPTIONS=--openssl-legacy-provider
这样可以解决 Webpack 和 Node.js 加密算法不兼容的问题。
然后启动项目 结果