UmiJS 配置多个环境，打包不同代码

大葱葱193

已于 2022-09-02 15:10:02 修改

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： UmiJS 文章标签： javascript 前端

于 2022-09-02 15:02:28 首次发布

本文链接：https://blog.csdn.net/qq_24937505/article/details/126657109

UmiJS 专栏收录该内容

2 篇文章

订阅专栏

假设：项目有多个环境，如正式环境、测试环境、第三方。

问：部署多台服务器，要求请求接口不同，如何做到同用一份代码，去做标识区分呢？

手把手-带你操劳起来

步骤：

#【已安装-直接忽略】安装。因为在window和mac下用到命令是不同的。这里要用到cross-env，这个是解决不同系统之前的命令兼容问题

yarn add cross-env

1、启用测试环境

第一步：设置。在package.json中设置下面代码

测试环境-启用取名为 a_test

"scripts": {
  "a_test": "npm run start:a_test",
  "start:a_test": "cross-env BUILD_ENV=a_test BUILD_VERSION=8080 UMI_ENV=dev umi dev"
}

第二步：umi项目中,找到配置文件config.ts，或者在config.js

前提：需要 Node.js中的一个环境对象 process.env ,其中保存着系统的环境的变量信息.【它是全局对象--直接拿过来用】

启用环境：yarn a_test

直接在配置文件，console.log(process.env) 可以打印出值传值 BUILD_EN 和 BUILD_VERSION

有了标识就可以快乐的玩耍了

第三步：umi项目中,修改配置文件config.ts，或者在config.js

import { defineConfig } from 'umi';
import { umirc } from './umirc';
const { BUILD_EN,  BUILD_VERSION } = process.env;
export default defineConfig({ // 其他配置项-我这就忽略了
   define: { // REAML 是我随意取的
     REAML: umirc(BUILD_EN, BUILD_VERSION).reaml
   }
})

第四步：在umirc文件去配置接口域名和端口号

export function umirc(BUILD_EN, BUILD_VERSION) {
  let reaml = "";
  switch (BUILD_EN) {
    case "test": // 测试环境-121.60.150.50[域名随便写的][BUILD_VERSION是端口，根据自己需要]
      reaml = `http://121.60.150.50:` + BUILD_VERSION; 
      break;
    case "pro": // 正式环境[域名根据自己项目需要]
      reaml = `http://pro.xuechenghong`; 
      breal;
    default:
      break;
  }
  // 返回的值，根据自己需要定
  return { reaml: reaml };
}

第五步：网络请求，我选择了umi-request，当然根据你们自己选择

// 我创建的request.js文件
import { extend } from 'umi-request';

/**
 * 配置request请求时的默认参数
 */

const request = extend({
  // 默认错误处理
  // eslint-disable-next-line no-undef
  errorHandler,
  // requestType: 'form',
  timeout: 90000, // 设置请求等待时间(毫秒)
});

/**
 * 请求拦截器
 * @author lishen
 */
request.interceptors.request.use((url, options) => {
// REAML 就是我们前面步骤中在配置文件自定义的【不知道，往前面步骤找】【它已是全局变量-直接使用】
  url = REAML + url
  return {
    url: url,
    options: {
      ...options, // options我省略了
      headers: {
        // 我省略了
      },
    },
  };
});

// 响应拦截器等等 我这省略了

第六步: API服务，创建文件services.js【根据自己项目的需要】

import request form  './request.js'

// 获取爱的列表
export async function mList(data) {
  return request('/LOVE/xuechenghong/get', {
    method: 'POST',
    data: data
  })
}

2、打包测试环境

第一步：设置。在package.json中设置下面代码

"scripts": {
  "build:test": "cross-env BUILD_ENV=a_test BUILD_VERSION=8080 BUILD_TYPE=build umi build"
}

后面步骤与前面相似，不管正式环境、测试环境、第三方，相类似

你学废了吗？