REACT相关配置

1 配置路劲

const { override, fixBabelImports,addWebpackAlias } = require('customize-cra');
const path = require('path')
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css',
  }),
  addWebpackAlias({
      assets:path.resolve(__dirname,'./src/assets'),
      "@":path.resolve(__dirname,'./src/components')
  })
);

customize-cra是一个库，用yarn add引入即可，fixBabelImports是配置antd-mobile库的相关代码， addWebpackAlias就是配置路径名的，这样配置后，以后引入assets的东西就直接from ‘assets/…’，而不用一直’…/…/…/’
引用components的文件就直接from ‘@/文件名’

2react设置代理

首先用Json-server模拟数据放在端口8080，react项目启动在3000，
所以在react中的node_modules中的react-scripts文件中的config中的webDevServer.config.js文件中配置proxy,

    proxy:{
      "/api":{
        target:"http://localhost:8080",
        changeOrigin:true,
        pathRewrite:{
          "/api":"/"
        }
      }
    },

这样再启动服务器就可以通过http://localhost:3000/api/hotcate获取到我们放在端口9000的数据。

但中间加个api, 如果后台的端口并没有api，就会增加以后获取数据的难度。故要去掉中间的api,

首先先配置一个文件，
在你下次启动json-server -w xxx.js -p 9000 时，中间加个 -r xxx.json自定义路由，这样就解决了。
即使还有api，但他会通过我们写的json自动匹配成/hotcate。