UMI+TS项目配置多环境打包

需求：配置dev、test、staging、production 环境，打包使用不同API地址。

创建不同环境的配置文件
（1）官方文档：多环境多份配置
（2）创建配置文件
配置环境变量
（1）官方文档：环境变量
（2）例：
umirc.test.ts

import { defineConfig } from 'umi';export default defineConfig({define: {// test 环境的请求基础地址'process.env.ENV': 'test','process.env.API_ROOT': 'http://test.xxx.xx.xx:50000'},proxy: { // 本地跨域可配置跨域代理'/api': {target: 'http://192.168.0.xxx:50000/',ws: true,changeOrigin: true,pathRewrite: { '^/api': '' },},},
});

umirc.staging.ts

import { defineConfig } from 'umi';export default defineConfig({define: {// staging环境的请求基础地址'process.env.ENV': 'staging','process.env.API_ROOT': 'http://staging.xxx.xx.xx:50000'},},
});

配置启动、打包命令
（1）需要安装 cross-env

 yarn add cross-env --dev

（2）在 package.json 配置如下

     "start:test": "cross-env UMI_ENV=test umi dev", // 启动命令"build:test": "cross-env UMI_ENV=test umi build", // test打包命令"build:staging": "cross-env UMI_ENV=staging umi build","build:production": "cross-env UMI_ENV=production umi build",

Umi-request 使用：

const request = extend({timeout: 20000,prefix: process.env.ENV !== 'dev' ? process.env.API_ROOT : '/api',errorHandler, // 默认错误处理credentials: 'include', // 默认请求是否带上cookie
});

Tips：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。
---------- 创作不易，感谢大家，请多多支持！

UMI+TS项目配置多环境打包相关推荐

vue 固定名称打包时_vuecli3 配置多环境打包
vue-cli3 配置多环境打包近期由于公司项目需要在本地服务器和阿里云服务器两个地方搭建项目,因为本地服务器是内网无法访问在阿里云的微服务接口所以需要用到多环境配置,所以就研究了一下vue-cli ...
spring cloud nacos 配置多环境打包
spring cloud nacos 配置多环境打包一.前言因需要将项目打包给N多第三方,他们有各自的nacos地址,又需要实现代码无侵入(配置文件存在很多版本如 application-tocd ...
laravel + Vue 前后端分离之项目配置- 生产环境部署
几日之后,开始部署生产环境, 有兴趣的同学可以先看一下laravel + Vue 前后端分离项目配置开发环境,好了,废话少说,开始总结部署过程中的问题:https://blog.csdn.ne ...
laravel + Vue 前后端分离之项目配置 - 开发环境
既然你来到查看这篇文章,那么你应该知道PHP 版本 >=7. 接着看一下目录 |-blog |-- api |-- front 目录外部很简单,,不多说了,赶紧看重点配置Laravel 作为前 ...
pycharm如何更改python项目环境_如何用Pycharm打开已有项目配置python环境
如何用Pycharm打开已有项目配置python环境发布时间:2020-07-06 11:06:30 来源:亿速云阅读:175 作者:清晨这篇文章将为大家详细讲解有关如何用Pycharm打开已有 ...
linux配置go环境--打包启动go项目
本来打算交叉编译,就是在Windows上配置: CGO_ENABLED=0 GOOS=linux GOARCH=amd64 之后进行打包 (记得在一个bash里面设置和打包,go env -w CGO ...
webpack 打包ts项目_使用webpack打包ts
初始化package.json npm init -y cnpm i -D webpack webpack-cli(webpack命令行工具) typescript ts-loader(整合) 2.1 ...
IntelliJ idea 给git下来的项目配置python环境（Anaconda）
对于IDEA集成开发环境,运行Python代码时需要配置Python解释器,没有正确配置时,直接运行代码会报错, 例如:import pandas as pd ModuleNotFoundError: ...
java maven项目配置windows环境并换源
前言 Maven 是一个项目管理工具,它包含了一个项目对象模型(Project Object Model),反映在配置中,就是一个 pom.xml 文件.是一组标准集合,一个项目的生命周期.一个依赖管 ...

UMI+TS项目配置多环境打包

UMI+TS项目配置多环境打包相关推荐

最新文章

热门文章

UMI+TS项目 配置多环境打包

UMI+TS项目 配置多环境打包相关推荐

最新文章

热门文章

UMI+TS项目配置多环境打包

UMI+TS项目配置多环境打包相关推荐