umi使用-umirc

.umirc.ts文件内容解析

作为umi框架中最重要的文件之一,.umirc.ts中提供的是一个配置对象;了解此对象的各个key的作用是至关重要的,本文先叙述了.umirc.ts文件的基本框架,然后对暴露出去的配置对象中的常见key逐个介绍。

1. .umirc.ts文件的基本框架

typescript 复制代码
import { defineConfig } from "umi";

export default defineConfig({
    routes: [
        {path: "/", component: "index"},
        {path: "/docs", component: "docs"},
    ],
    npmClient: "yarn",
    metas: [
        {
            name: "version", 
            content: "1.0.0",
        }
    ],
})

2. 配置对象中的其他重要字段

2.1 routes

用来定义应用的路由配置,是一个数组:Record<'path'|'components', string >

2.2 hash

是否给url添加一个哈希路由

2.3 dynamicImport

将应用配置成动态导入的行为

2.3.1 dynamicImport.loading

如果导入的耗时时间长就显示这个字段配置的组件

2.4 ignoreMomentLocale: boolean

针对第三方库moment的优化字段

2.5 proxy

自带的代理,例如:

ts 复制代码
"/api/v1": {
    target: "http://192.168.1.94:9999",
    changeOrigin: true,
}

2.6 meta

为入口文件,即index.html中注入meta信息:

ts 复制代码
metas: [
    {name: "version", content: "1.0.0"},
]

2.7 chainWebpack

可以在此字段中覆盖一些webpack的配置:

ts 复制代码
chainWebpack: (config, {webpack}) => {
    config.merge({...})
}

举个实际的例子,用来修改webpack的optimization配置:

ts 复制代码
  chainWebpack: (config, { webpack }) => {
    config.merge({
      optimization: {
        splitChunks: {
          cacheGroups: {
            commons: {
              name: 'commons',
              chunks: 'initial',
              minChunks: 2,
            },
          },
        },
      },
    });
  },

2.8 authAllowed

用来指定哪些页面不需要权限

ts 复制代码
authAllowed: ['/download'],

2.9 根目录页面

ts 复制代码
    path: '/',
    component: '@/pages/welcome/index.jsx',
相关推荐
前端大白话16 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys18 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话19 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
Rudon滨海渔村26 分钟前
【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!
javascript·electron·tauri·桌面应用
cg501730 分钟前
Vue回调函数中的this
前端·javascript·vue.js
前端太佬32 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb200442 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼43 分钟前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html
_09271 小时前
Vue 2 与 Vue 3 的核心区别及 Vue 3 新特性详解
前端
David凉宸1 小时前
一文带你使用Vue完成移动端(apk)项目
前端