【前端备忘录】react项目琐碎知识点

Less配置

React项目中没有配置Less的地方，需要先对项目进行解包，再进行Less配置：

1. 暂停React项目，在终端中输入npm run eject或者 yarn eject
2. 终端中提示Remove untracked files, stash or commit any changes, and try again.,需要先提交一次Git。这是因为上一步解包(eject)的命令是不可逆的,一旦解包完成，就再也回不到原先的状态了。所以要先提交一次Git，哪怕接下来发生最坏的情况，也可以Git回滚(git reset)
3. 提交commit之后，再次在终端中输入npm run eject或者 yarn eject
4. 输入y确认解包
5. 等待解包完成，这时候就可以在项目根目录下看到一个config文件夹，这就是webpack的配置文件了
6. config文件夹下的webpack.config.js就是配置Less的文件了
7. 在webpack.config.js文件中查找sassModuleRegex这就是配置sass的地方。同理，我们可以在这下面（同一级，对齐）配置less
8. 在文件中输入：

   {
    test: /\.less$/,
    use: getStyleLoaders(
      {
        //暂不配置
      },
      'less-loader'
    ),
   },
   
   

9. 将项目重启
10. 测试less是否可用

解决跨域

1. 在config文件件下找到webpackDevServer.config.js文件
2. 找到proxy，输入：

   proxy: {
   '/api': {
       target: 'http://47.93.114.103:6688/manage', // 后台服务地址以及端口号
       changeOrigin: true, //是否跨域
       pathRewrite: { '^/api': '/' }
   }
   }
   

antd侧边栏无法使用height:clac(100vh-140px)来指定高度

解决方案： 可以在侧边栏组件外套一层div在div上指定高度为100vh

   <div className='container' style={{height:'100vh'}}>
        <Aside ></Aside>
        <div className='container_box'>
            <div>
                <Outlet></Outlet>
            </div>
        </div>
  </div>

在请求头中添加token

1. 找到封装request的文件如request.js
2. 找到请求拦截器部分,如：instance.interceptors.request.use
3. 在请求拦截器汇总添加：

     let token = localStorage.getItem('cms-token')
        if (token) {
          config.headers = {
            'cms-token': token
          }
        }
     return config;