umi3配置不同环境打包命令

umi设置打包命令

安装依赖

npm install --save-dev cross-env

package.json文件

  "scripts": {
    "start": "umi dev",
    "build": "umi build",
    "postinstall": "umi generate tmp",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage"
  },

项目下新建 环境变量文件.umirc.test.ts

export default {
  define: {
    'process.env': {
      UMI_ENV: 'test',
    },
  }
}

项目下新建 环境变量文件.umirc.prod.ts

export default {
  define: {
    'process.env': {
      UMI_ENV: 'prod',
    },
  }
}

.umirc.ts配置打包路径

import { defineConfig } from 'umi';

const { UMI_ENV = '' } = process.env;
console.log('UMI_ENV', UMI_ENV);

function OutputPathName(env: string) {
  if (env) {
    return `${env}-dist`

  }
  return 'dist'

}
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
  outputPath: OutputPathName(UMI_ENV)
});

package.json配置不同环境打包命令

  "scripts": {
    "start": "umi dev",
    "build": "umi build",
    "build:test": "cross-env UMI_ENV=test umi build",
    "build:prod": "cross-env UMI_ENV=prod umi build",
    "postinstall": "umi generate tmp",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage"
  },

yarn build:test #执行命令，木箱生成test-dist目录

yarn build:prod #执行命令，目录下生成prod-dist目录

yarn build #执行命令，目录下生成dist目录