react+antd-mobile 包括axios拦截，本地开发请求代理

安装react

npm install -g create-react-app //安装环境
create-react-app my-app //创建应用 应用名称my-app 最好使用正确的路径
cd my-app 先进入到根目录

官网 https://zh-hans.reactjs.org/docs/create-a-new-react-app.html

安装antd-mobile 可选

npm install antd-mobile --save

入口页面 (html 或 模板) 相关设置

Ant Design https://ant.design/docs/react/use-with-create-react-app-cn

<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> 
<script> if ('addEventListener' in document) { 
	document.addEventListener('DOMContentLoaded', function() { 
		FastClick.attach(document.body); 
		}, false); 
	} if(!window.Promise) { 
		document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
	} 
</script>

按需加载
npm install react-app-rewired customize-cra --save-dev npm install babel-plugin-import --save-dev npm install --save react-scripts

webpack.config.js文件 babel-loader的options字段下的plugins加入

[ “import”,{libraryName: “antd”, style: ‘css’}] // antd按需加载

ok
ps 使用方式： import { Button } from ‘antd-mobile’;

本地开发代理 区分开发环境和正式环境

根目录添加.env.development

# just a flag
ENV = 'development'

# base api
REACT_APP_API = '/api'

根目录添加.env.production文件

# just a flag
ENV = 'production'

# base api
REACT_APP_API = 'https://www.test.com/'

setupProxy.js文件：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  // ...You can now register proxies as you wish!
  app.use(createProxyMiddleware('/api', { 
    target: 'https://www.test.com/',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
     "^/api": "/"
    },
   }))
};

可看项目github
项目github https://github.com/keykai9256/reactLL.git