配置文件
Umi.js 的配置文件是用于定制和扩展应用行为的重要工具。通过配置文件，你可以修改项目的默认设置，添加插件，定义路由，配置代理等。Umi.js 支持多种配置文件格式，最常用的是 .umirc.js 和 config/config.js。下面将详细介绍这些配置文件的使用方法及其支持的配置项。
配置文件类型
1. .umirc.js
这是一个简单的 JavaScript 文件，通常用于小型项目或不需要复杂配置的场景。它导出一个对象，该对象包含各种配置项。
// .umirc.js
export default {
// 配置项
};2. config/config.js
对于需要更复杂配置或不同环境下的差异化配置，推荐使用 config/config.js。这个文件可以导出一个函数，接收 env 参数（代表当前环境），并返回配置对象。此外，还可以在 config/ 目录下为不同的环境创建单独的配置文件，如 config/prod.js 或 config/dev.js。
// config/config.js
export default function (api) {
return {
// 配置项
};
}常见配置项
以下是一些常用的配置项，它们可以在 .umirc.js 或 config/config.js 中进行设置：
1. hash
启用 URL hash 模式，适用于避免服务端配置问题。
hash: true,2. publicPath
设置静态资源的基础路径，这对于部署到子路径的应用特别有用。
publicPath: '/subpath/',3. history
指定路由模式，默认是 browserHistory。如果你遇到浏览器不支持 HTML5 history API 的情况，可以改为 hashHistory。
history: 'hash',4. routes
定义路由规则，如前所述，这可以通过约定式路由自动推断，也可以手动配置。
routes: [
{ path: '/', component: 'index' },
{ path: '/users', component: 'users' },
],5. proxy
配置开发环境下的代理，以解决跨域请求问题。
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: { '^/api': '' },
},
},6. plugins
添加插件来扩展 Umi 的功能。
plugins: [
// https://github.com/umijs/plugin-locale
['umi-plugin-react', {
antd: true,
dva: true,
dynamicImport: { loadingComponent: './components/PageLoading' },
}],
],7. theme
自定义主题变量，尤其对于使用 Ant Design 的项目非常有用。
theme: {
'@primary-color': '#1DA57A',
},8. define
定义全局常量，在编译时替换这些值。
define: {
'process.env.API_URL': 'https://api.example.com',
},9. alias
配置模块别名，方便引用本地模块。
alias: {
'@/': path.resolve(__dirname, 'src'),
},10. ignoreMomentLocale
禁用 moment.js 的 locale 加载，减少打包体积。
ignoreMomentLocale: true,11. lessLoaderOptions
自定义 Less Loader 的选项，例如修改 Less 变量。
lessLoaderOptions: {
javascriptEnabled: true,
},12. chainWebpack
对 Webpack 配置进行更深层次的自定义。
chainWebpack(memo, { env }) {
memo.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end();
memo.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
});
},13. babel
自定义 Babel 配置。
babel: {
plugins: [
['import', { libraryName: 'antd', style: 'css' }],
],
},14. extraBabelPlugins
添加额外的 Babel 插件。
extraBabelPlugins: [
['import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false }, 'lodash'],
],15. headScripts
向页面头部插入脚本标签。
headScripts: [
{ src: 'https://example.com/script.js' },
],16. outputPath
使用umi build 后输出文件的目录。
17. exportStatic
开启该配置后，会打包成多个静态页面，每个页面对应一个路由，开启多静态页面应用的前提条件是，没有动态路由。
示例：完整的 .umirc.js 配置
export default {
hash: true,
publicPath: "/",
history: "hash",
routes: [
{ path: "/", component: "index" },
{ path: "/users", component: "users" },
],
proxy: {
"/api": {
target: "http://localhost:3000",
changeOrigin: true,
pathRewrite: { "^/api": "" },
},
},
plugins: [
[
"umi-plugin-react",
{
title: true, // 开启title插件
antd: true, // 开启antd
dva: true, // 开启dva
immer: true, // 开启immer，dva-immer 插件
routes: {
exclude: ["/.*/models/.*/", "/.*/model.js/"],
},
dynamicImport: { loadingComponent: "./components/PageLoading" },
},
],
],
theme: {
"@primary-color": "#1DA57A",
},
define: {
"process.env.API_URL": "https://api.example.com",
},
alias: {
"@/": path.resolve(__dirname, "src"),
},
ignoreMomentLocale: true,
lessLoaderOptions: {
javascriptEnabled: true,
},
chainWebpack(memo, { env }) {
memo.module.rule("svg").exclude.add(resolve("src/icons")).end();
memo.module
.rule("icons")
.test(/\.svg$/)
.include.add(resolve("src/icons"))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]",
});
},
babel: {
plugins: [["import", { libraryName: "antd", style: "css" }]],
},
extraBabelPlugins: [
[
"import",
{
libraryName: "lodash",
libraryDirectory: "",
camel2DashComponentName: false,
},
"lodash",
],
],
headScripts: [{ src: "https://example.com/script.js" }],
};总结
Umi.js 的配置文件提供了丰富的选项来满足不同项目的需求。根据项目的复杂度和个人偏好选择合适的配置方式，并合理利用这些配置项可以帮助你构建更加高效、灵活和可维护的应用程序。