加载中...
  • umi 配置多环境编译打包

    平时我们开发应用时环境有开发环境、测试环境、生产环境等,此时我们需要配置不同的环境,获取不同的apiUrl前缀,以满足日常开发需要。

    1.安装 cross-env 插件

    1
    npm install --save-dev cross-env

    2.创建不同环境的配置文件

    例如:需要 dvl、sit 两个环境,因此创建两个配置文件,如图:
    RPPanO.png

    3. 配置需要的环境变量

    此部分可参考:
    https://v2.umijs.org/zh/config/#define

    dvl环境:新建.umirc.dvl.ts文件

    1
    2
    3
    4
    5
    6
    7
    8
    import { defineConfig } from 'umi';

    export default defineConfig({
    define: {
    // dvl 环境的请求基础地址
    'process.env.apiUrl': 'http://xxx.xxx.xx.xx:8080'
    }
    });

    sit环境 .umirc.sit.ts

    1
    2
    3
    4
    5
    6
    7
    8
    import { defineConfig } from 'umi';

    export default defineConfig({
    define: {
    // dvl 环境的请求基础地址
    'process.env.apiUrl': 'http://xxx.xxx.xx.xx:8080'
    }
    });

    4. 配置启动命令

    在 package.json 配置如下命令:

    1
    2
    3
    4
    5
    6
    7
    8
    {
    ...
    "start:dvl": "cross-env UMI_ENV=dvl umi dev",
    "start:sit ": "cross-env UMI_ENV=sit umi dev",
    "build:dvl": "cross-env UMI_ENV=dvl umi build",
    "build:sit": "cross-env UMI_ENV=sit umi build",
    ...
    }

    在其他文件可以获取process.env.apiUrl 作为url前缀,如封装axios的request.js

    1
    console.log(process.env.apiUrl);

    这样子基本就OK了

    参照:
    https://blog.csdn.net/weixin_39551188/article/details/112960237
    https://www.codercto.com/a/56964.html
    https://segmentfault.com/a/1190000023885434
    https://www.58h.com.cn/a/UmiXiangMuDuoHuanJingDaBaoPeiZhi.html
    https://www.yuque.com/blueju/blog/yayh66

    上一篇:
    npm 403 Forbidden - PUT http://registry.npmjs.org/vue-simple-chat - Forbidden npm ERR! 403 In most
    下一篇:
    TypeError: Cannot read property 'state' of undefined
    本文目录
    本文目录