react hooks项目中【前端路径、静态资源（js和图片）、后端接口】中添加一个路径的全过程

**

我们在所有的路径上开端都加一个/api

一、 前端路径

1.1 我们需要在App.tsx中由此更改，由下图

  useEffect(() => {
    const token = getToken();
    if (window.location.pathname !== '/login') {
      if (token) {
        dispatch(getUserAuth());
      } else {
        window.location.href = '/login';
      }
    }
  }, [dispatch]);
 <Router basename={'/'}>
        {
          <Switch>
            <Route exact path="/login">
              <Login />
            </Route>
            <Route>
              <Layout />
            </Route>
          </Switch>
        }
      </Router>

变更为

  useEffect(() => {
    const token = getToken();
    if (window.location.pathname !== '/api/login') {
      if (token) {
        dispatch(getUserAuth());
      } else {
        window.location.href = '/api/login';
      }
    }
  }, [dispatch]);
 <Router basename={'/api'}>
        {
          <Switch>
            <Route exact path="/login">
              <Login />
            </Route>
            <Route>
              <Layout />
            </Route>
          </Switch>
        }
      </Router>

1.2 在登录接口调用成功后

 window.location.href = '/';

变更为

 window.location.href = '/api';

二、 静态资源

静态资源一般分为两种
一部分存于public文件夹里
另一部分存于src/assets里面
我们在主目录里添加一个.rescriptsrc.js文件
主要代码： config.output.publicPath = '/api/' ;

module.exports = {
  webpack: (config) => {
    const ENV = process.env.REACT_APP_ENV?.toLowerCase() || '';
    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';
    config.output.jsonpFunction = `webpackJsonp_${name}`;
    config.output.globalObject = 'window';
    config.output.publicPath =  '/api/' ;
    return config;
  },

  devServer: (_) => {
    const config = _;
    config.headers = {
      'Access-Control-Allow-Origin': '*',
    };
    config.historyApiFallback = true;

    config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;

    return config;
  },
};

三、 后端接口

3.1 为了统一调整，尽量少些代码，我们将修改放到request.js（请求封装的方法）里面

 baseURL: ZT_API_BASEURL（原来的路径）

变更为

baseURL: ZT_API_BASEURL + '/api'

3.2 注意

有一些重新写入baseUrl的request，在文件中我们也要及时调整