UmiJS初探（三）-常用配置

小知识，大挑战！本文正在参与“   程序员必备小知识   ”创作活动

umi中的配置config

常用配置的一些补充

• base： 路由前缀

比如原本路由为 / 或者 /login，加入base 之后 路由就会自动加上前缀 /doces/ ,/doces/login

• hash 生成文件加有hash后缀

开启后，打包后的文件名字，加有hash后缀，通常用于增量发布和避免浏览器加载缓存

dist 文件夹下生成的 umi.8sd8fw.css ，加有后缀

• publicPath 资源的路径前缀

开启配置后 ，原本的请求 前面会加上 publicPath配置的参数

如 /xxx.js ，配置后 https ://www .xxx .com/xxx.js

• history 配置路由方式

hash模式 会在地址前面加 #/ 如：xxx.com/ -> xxx.com/#/

browser 模式不带 #/

• targets 配置兼容的浏览器版本

开启后会自动兼容配置的浏览器版本

• proxy 配置代理能力

开启后会具有代理能力，便于解决跨域问题检测到/api 后 会自动把请求转换为配置的target，并且可替换 /api 为任何字

export default {
  base: '/docs/', //路由前缀
  hash:true，      //build 打包后的文件名加有hash后缀
  title: 'hello-world',    // 配置项目标题
  publicPath:'https://www.xxx.com/', //配置资源前的路径
  outputPath:'builds', //配置输出后的路径，
  //配置 路由方式
  history:{
      type:'hash'
  },
 //配置浏览器兼容性
 targets: {
    ie: 11,
  },
// 配置代理
proxy: {
    '/api': {
      'target': 'http://jsonplaceholder.typicode.com/',
      'changeOrigin': true,
      'pathRewrite': { '^/api' : '' },
    },
  },

//配置主题
theme: {
    @primary-color: #1890ff; // 全局主色
    @link-color: #1890ff; // 链接色
    @success-color: #52c41a; // 成功色
    @warning-color: #faad14; // 警告色
    @error-color: #f5222d; // 错误色
    @font-size-base: 14px; // 主字号
    @heading-color: rgba(0, 0, 0, 0.85); // 标题色
    @text-color: rgba(0, 0, 0, 0.65); // 主文本色
    @text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
    @disabled-color: rgba(0, 0, 0, 0.25); // 失效色
    @border-radius-base: 2px; // 组件/浮层圆角
    @border-color-base: #d9d9d9; // 边框色
    @box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
      0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影
  }

}