使用 umi + dva 开发配置接口环境

关于选择project, 自定义开发的话, 选择 app 选项,其它不多说了

之后会问你选择 ts 吗? ,是否使用antd, dva, code spliting ,dll,可选的,自己决定

最后,启动项目,打开控制台,一堆警告,和错误提示,关于警告,就是react 钩子在新版本已经换名字了,现在的这些以后会过时了,都是 .umi 文件报的,并不是实例代码错误,你可以选择不展示在控制台

在控制台把这个关闭就不会展示了

目录结构呢,就不说了,文档上有的

接着,通过环境变量 UMI_ENV 区分不同环境来指定配置。配置开发环境,测试环境,和生产接口环境

  1. 安装 cross-env

yarn add cross-env

  1. 修改 .umirc.js 文件,添加一个 define属性(这个是测试及开发)

  2. 配置生产环境,赋值一份这个文件 改名为 .umirc.prod.js ,把接口换成你的正式服务器接口

  3. 修改打包指令, 在package.json 中

“scripts”: {
“start”: “umi dev”,
“test”: “umi test”,
“devbuild”: “cross-env UMI_ENV=dev umi build”,
“build”: “cross-env UMI_ENV=prod umi build”,
“lint”: “eslint --ext .js src mock tests”,
“precommit”: “lint-staged”
},
5. 测试,在 app.js 中 写入打印 process.env.apiUrl , 然后重启 开发 服务

export const dva = {
config: {
onError(err) {
err.preventDefault();
console.error(err.message);
},
},
};
console.log(process.env.apiUrl);
6. 打印开发 成功 !

  1. 测试服务器接口打包, 执行 npm run devbuild ,打印同开发环境

  2. 打印生产接口地址

关于其它多项配置,自己参考文档吧

至此,不同的环境打包配置完毕,接下来,你就可以在 src 下创建 utils 文件,封装 ajax 服务了

baseUrl 就是 process.env.apiUrl的值

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页