Ant Desing Pro config文件浅析

最新推荐文章于 2024-06-07 13:32:37 发布

学习不会停

最新推荐文章于 2024-06-07 13:32:37 发布

阅读量439

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： docker etcd

本文链接：https://blog.youkuaiyun.com/yyy_react/article/details/130057282

本文分析了Ant Design Pro的config文件，包括process.env获取Node进程信息，defineConfig的设置如hash、antd、dva、dynamicImport、targets、theme和manifest。config文件用于配置项目构建、浏览器兼容性和主题等。routes部分讨论了布局文件的加载逻辑，如UserLayout、SecurityLayout和BasicLayout，允许自定义布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）process.env

process是node的一个全局模块，可以用它来得到node进程的一些相关信息，比如环境变量

（2）defineConfig

hash

配置是否让生成的文件包含 hash 后缀，通常用于避免浏览器加载缓存。

antd

整合 antd 组件库

antd: {
     
     
    dark: true, // 开启暗色主题
    compact: true, // 开启紧凑主题
},

dva

整合 dva 数据流

dva: {
     
     
    immer: true, // 表示是否启用 immer 以方便修改 reducer
},

dynamicImport

是否启用按需加载，即是否把构建产物进行拆分

 dynamicImport: {

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

学习不会停

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue Ant Design Pro 中定制主题

wanghuan1020的博客

08-20

2456

Vue Ant Design Pro 中定制主题需求定制主题去除“正在切换主题”过渡效果需求项目要求使用草绿色的主题色并且去除如下的loading效果定制主题这里可以参照 Ant Design Pro of Vue 官方文档哦定制方式是使用 less 的 modifyVars 的方式进行覆盖变量官方文档已经给出了 webpack 、vue cli 2 以及 vue cli 3 三种不同场景下主题的定制方式。这里不再过多赘述 vue cli 3 下定制主题方式如下：项目根目录下修

antd Pro系列之文件结构

ryan_dr的博客

12-30

2517

antd Pro文件结构项目的文件结构直接干活走起~ -config // 配置文件 --config.js // 路由定义文件&&代理路径文件 --defaultSettings.js // 主题颜色以及标题配置文件 --plugin.config.js // 没怎么用过的配置...

1 条评论您还未登录，请先登录后发表或查看评论

Ant Design Pro -- 03config@20210331

Dyoner013

03-31

440

config/config.js export default { base: '/web/', //部署到非根目录时才需配置 targets: { //配置浏览器最低版本,比如兼容ie11 ie: 11 }, hash: true, //开启打包文件的hash值后缀 treeShaking: true, //去除那些引用的但却没有使用的代码 plugins: [ [ 'umi-plugin-react', { antd: t

Ant design pro使用(二):配置路由

好气嗷，但仍要保持微笑!

11-09

2935

ant design pro的路由配置在 config/config.ts 中 pages中创建组件 2.配置路由 //import {BasicLayout,UserLayout} from '@/layouts'//这种方法会报错不能识别@/layouts模块 rotes:[ { path:'/user', component:'../layouts/UserLayout',//如果不使用模板 layout:false routes:[

Ant Design Pro引入自定义主题及在主题文件中配置背景图片

虚怀若愚

12-16

1万+

文章目录前言分析修改和引入主题文件在主题文件中配置背景图片前言开发环境：Ant Design Pro: 2.0 官方文档：定制主题 Ant Design Pro官方提供了黑色主题和阿里云控制台主题，可以参考文档直接使用。项目需求：前端主题根据应用场景灵活匹配，在一个主题文件里能修改所有属性。背景图片可以在主题文件中定制。分析 2.0版本的Ant Design Pro默认主题路...

浅析Vue3 实战笔记(一)

最新发布

qq_32453495的博客

06-07

1058

vue3 + vite + ant-design-vue+echarts实战笔记

ant design pro动态菜单

10-08

自己写的ant design pro动态菜单，不足请指正，互相学习借鉴！

Ant Design Pro 修改主题设置

闪电⚡之王的博客简介

07-10

3300

Ant Design Pro修改标题logo图标主题等设置

Ant design 使用nginx部署

w345731923的专栏

07-28

1189

环境： Ant design Pro：v5 ts nginx：1.21.0 详情参考Ant design Pro 部署篇：https://pro.ant.design/zh-CN/docs/deploy 官方推荐使用默认的browserHistory和nginx 使用browserHistory则需要服务器做好处理 URL 的准备，处理应用启动最初的/这样的请求应该没问题，但当用户来回跳转并在/users/123刷新时，服务器就会收到来自/users/123的请求，这时你需要配置服...

ant design pro v5 - 03 动态菜单动态路由（配置路由动态登录路由登录菜单）

haiyabtx

10-17

1万+

React + TypeScript + Ant Design Pro V5.2 开箱即用的中台前端/设计解决方案。动态菜单动态路由（配置路由+动态登录路由）

ant-design-pro项目开发全攻略（用这个做博客网站模板不要太快，一招鲜吃遍天）

在下月亮有何贵干

03-01

9918

打算做一个个人网站，新建umi项目的时候发现了ant-design-pro这个项目模板，打开一看貌似挺有用，记录一下一步步探索的开发攻略，包括如何修改主题内容、添加路由新页面，以及将md文档文件插入页面（用于博客网站制作）。

antd pro(V5) 配置自定义路径

qq_27175079的博客

01-21

2786

之前想配置一个公共模块的别名，不想使用"…/…/…/…/"这样的路径，由于没有看官方文档，直接去社区或者搜索引擎里找，没有找到方法。今天我心血来潮看了一下文档，发现它是有办法修改的之前一直都是自己瞎折腾，在tsconfig.json里面配置，其实应该在config/config.ts里配置，找对了方法实现就不难了。主要要改两个地方： 1.config/config.ts import path from 'path'; export default defineConfig({ alias: {

Ant Design Pro学习记录—默认主题配色修改

岁月佳醉的博客

08-11

6647

Ant Design Pro默认主题配色修改

Ant Design Pro 整理

lhb_11的博客

10-31

466

1. 目录结构 ├── config # umi 配置，包含路由，构建等配置 └── config.js # 基础配置，包含路由配置 └── defaultSettings.js #项目的默认配置文件 └── plugin.config.js # ├── mock # 本地模拟数据 ├── publi...

我常用的ant配置文件

weixin_33946605的博客

07-04

build.xml如下： <?xml version="1.0" encoding="UTF-8"?> <project name="yybar" basedir="." default="build"> <!--Load properties file <property file="bui

antdPro项目跨域配置

前端-卡布达的博客

06-12

1609

antdPro项目跨域配置

vite react 修改Antd默认全局样式

weixin_44463231的博客

08-23

1089

vite 修改Antd默认全局样式

ant-design-pro 使用总结—自定义打包构建配置

热门推荐

liusaint1992的专栏

11-04

3万+

ant-design-pro使用了umi.js，没有直接使用webpack，我们要配置自定义的构建打包跟直接的webpack配置不太一样。首先，大部分的webpack打包配置都可以直接修改config/config.js来实现,比如 proxy，publicPath等。参考umi.js配置文档。https://umijs.org/zh/config/#基本配置。这里记录一些针对性的配置。 ha...

antd-pro使用笔记

KevinChao888的博客

09-03

866

一、添加新页面 1. 使用umi创建页面 umi g page Service/Dependency 2. 在config/router.config.js中增加路由 { path: '/service/dependency', name: 'dependency', component: '...

how to implement multiple tabs in ant desing pro

05-09

To implement multiple tabs in Ant Design Pro, you can use the `Tabs` component provided by Ant Design. Here are the steps: 1. Import the `Tabs` component from Ant Design: ``` import { Tabs } from 'antd'; ``` 2. Define the tabs and their content: ``` const { TabPane } = Tabs; function callback(key) { console.log(key); } <Tabs defaultActiveKey="1" onChange={callback}> <TabPane tab="Tab 1" key="1"> Content of Tab Pane 1 </TabPane> <TabPane tab="Tab 2" key="2"> Content of Tab Pane 2 </TabPane> <TabPane tab="Tab 3" key="3"> Content of Tab Pane 3 </TabPane> </Tabs> ``` In this example, we have defined three tabs with the content for each tab. We have also defined a `callback` function that will be called when the active tab changes. 3. Customize the tabs using props: The `Tabs` component provides several props that can be used to customize the appearance and behavior of the tabs. Some of the commonly used props are: - `defaultActiveKey`: The key of the tab that should be active by default. - `activeKey`: The key of the currently active tab. - `onChange`: A function that will be called when the active tab changes. - `tabBarStyle`: An object that can be used to style the tab bar. - `tabBarExtraContent`: Content that should be displayed to the right of the tabs. For example, you can set the `tabBarStyle` prop to change the background color of the tab bar: ``` <Tabs defaultActiveKey="1" onChange={callback} tabBarStyle={{ background: '#fff' }} > ... </Tabs> ``` You can also use the `tabBarExtraContent` prop to add buttons or other elements to the right of the tabs: ``` <Tabs defaultActiveKey="1" onChange={callback} tabBarExtraContent={ <Button type="primary" size="small"> New Tab </Button> } > ... </Tabs> ``` In this example, we have added a `Button` component to the right of the tabs.