ant design pro官网中文（antd使用pro-components时总是提示ReferenceError: process is not defined）
本文目录
- antd使用pro-components时总是提示ReferenceError: process is not defined
- Ant Design Pro Vue使用心得
- SpringBoot整合Ant Design Pro进行部署
- ant design pro踩坑之路
- Pro Ant Design 使用analyze 优化前端首次加载时间
antd使用pro-components时总是提示ReferenceError: process is not defined
这个错误的原因是：在浏览器环境中，并不存在 Node.js 中的 process 全局变量，而 Ant Design Pro-Components 中的一些代码可能会使用到 process 变量，因此在浏览器环境中会出现这样的错误。
解决方法：可以使用一个简单的解决方案，即在入口文件中添加以下代码：
global.process = {
env: {
NODE_ENV: ’production’,
},
};
如果你使用了 webpack，可以在 webpack 配置中添加以下代码：
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
’process.env’: {
NODE_ENV: JSON.stringify(’production’),
},
}),
],
...
};
这样就可以解决 ReferenceError: process is not defined 错误了。
Ant Design Pro Vue使用心得
路由和菜单是组织起一个应用的关键骨架，pro 中的路由为了方便管理，使用了中心化的方式，在 ==router.config.js== 统一配置和管理。
目前脚手架中所有的路由都通过 ==router.config.js== 来统一管理，在 ==vue-router== 的配置中我们增加了一些参数，如 ==hideChildrenInMenu==,==meta.title==,==meta.icon==,==meta.permission==，来辅助生成菜单。其中：
***隐藏网址***
菜单根据 ==router.config.js== 生成，具体逻辑在 ==src/store/modules/permission.js== 中的 ==actions.GenerateRoutes== 方法实现。
在 Ant Design Pro 中，我们抽离了使用过程中的通用布局，都放在 ==/components/layouts== 目录中，分别为：
在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：
从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 @/src/api 文件夹中，并且一般按照 model 纬度进行拆分文件，如：
其中，==@/src/utils/request.js== 是基于 ==axios== 的封装，便于统一处理 ==POST==，==GET== 等请求参数，请求头，以及错误提示信息等。具体可以参看 ==request.js==。 它封装了全局 request 拦截器、response 拦截器、统一的错误处理、baseURL 设置等。
例如在 api 中的一个请求用户信息的例子：
***隐藏网址***
***隐藏网址***
***隐藏网址***
-更换logo在==src\components\tools\Logo.vue==中更换
在==vue.config.js==文件中修改
在文件==src\utils\request.js==中设置
动态方法的引用
调用获取动态方法
SpringBoot整合Ant Design Pro进行部署
构建打包成功之后，会在根目录生成 dist 文件夹，然后将dist 文件夹里的的文件复制到 spring boot 项目的 /src/main/resources/static 目录下
注意：@Controller不是@RestController，使用@RestController会返回“index”字符串
***隐藏网址***
***隐藏网址***
需要配置一下，让js、css等静态资源去static目录下去加载
***隐藏网址***
***隐藏网址***
关于2.3，网上有一种思路是这样的：
Ant Design构建完成后只有一个index.html页面和一些js、css文件，当使用browserHistory，如果直接放在Spring Boot的resource/static文件夹下面，当浏览器直接访问或者在非 "/ “，”/index"路径刷新时，由于服务器无法正确响应，会直接触发404报错。
解决思路：浏览器访问任何404错误路径都返回 /index.html文件。剩下的事情交给前端路由
这种方式也能实现效果，但这种方式使得所有的错误请求（404）都会被拦截跳转到index.html ,其实不太严谨，而且给人的感觉是，先让其“出错”，再来“补救”
参考官方文档： Ant Design Pro
ant design pro踩坑之路
1.Warning: `defaultValue` is invalid for `getFieldDecorator` will set `value`, please use `option.initialValue` instead.
动态监听路由路径的变化
componentDidMount() {
this.props.history.listen(route =》 {
this.setState({
pathname:route.pathname
})
this.setState({
operatingState:route.query.action
})
})
}
Pro Ant Design 使用analyze 优化前端首次加载时间
之前使用Pro Ant Design（react）脚手架做了个web前端项目，在打包发布的时候，发现打包后静态文件太大了，首次加载需要16秒中的时间。
在Pro Ant Design 官网找到了 npm run analyze 指令分析打包文件的大小， 根据analyze的分析后，将加载速度优化了3秒，记录下过程。首先运行npm run analyze 得到
根据图中的信息可以清楚的看到前端加载的每个库文件所占的体积。发现echarts（数据图标库）这个库占的文件太大了。
echarts在我的项目中只是首页展示的几个圆圈，但是整个库的体积比蚂蚁金服的Ant Design库还要大。所以想到将这个库替代。
上图是echarts库使用和不使用加载时间对比，发现快了三秒。之后我将echarts的库改为pro ant design 自带的表格库使用进行替代。
前端加载优化还可以从很多方面如手，比如压缩图片，减少接口请求。这里就不再涉及了。简单介绍下analyze 这个工具的的使用
更多文章：
excel表格中，如何匹配单元格中含有通配符“*“？EXCEL SUBSTITUTE 通配符
2026年9月20日 21:45
2026年9月5日 18:30
2026年8月3日 21:15
2026年2月27日 07:15
2025年10月24日 03:30
tcpip有多少个协议（tcpip参考模型中应用层协议常用的有）
2026年1月18日 15:45
2026年6月6日 21:45
qq聊天音乐代码（qq发信息有音乐符号，点一下它出来一首歌）
2025年12月24日 17:15
SAP是一个什么行业_sap是干什么的？南京雨润集团sap岗位怎么样
2026年8月6日 18:15
2025年9月8日 05:00
2026年7月21日 15:30
ajax提交form表单失败（layui的以ajax提交表单不成功问题）
2026年9月3日 04:15
php运行环境安装（server2008如何部署iis+php+mysql运行环境）
2025年9月24日 02:45
2025年10月12日 02:45
simulink安装包下载（谁有关于光热发电的simulink仿真或其他仿真）
2026年3月2日 01:30
2026年1月11日 00:30
2025年12月1日 14:30
大漠易语言模块（大漠插件易语言模块为什么分辨率变化了.鼠标移动到坐标就不对了）
2026年3月12日 03:45
2026年4月2日 21:45
