react实战项目01---踩坑记录

记录心酸长成

背景交代：本人是跟着尚硅谷的一个React实战项目–硅谷直聘学习的，一个简单的前后台分离的SPA(single page application)，具体可以看B站

注册页面

1. 路由跳转实现，运行项目的时候不报错，但就是不能跳转

解决方法:将HashRouter  换成 BrowserRouter

2. 使用 yarn eject或者npm run eject命令时，报错
   
   找了网上很多资料，终于给解决了，下面给出具体操作（超简单）：

3. 先删除项目下的 node_modules 文件夹
4. 终端输入： nmp install 

5. (耗时最久，差点让人抓头发)关于在React中引用less 样式，搞了好久，最后看到出现结果的时候我😢都要掉下来了 ……
   
   具体解决方法：

• 执行 yarn eject命令后，暴露出 config 文件夹，然后修改 webpack.config.js配置文件，这里就不一一写了，可参考博客
• 执行 npm start，发现less 样式还是未生效，也没有报错；这时需要去打开 package.json 文件确认下，是否已经有 less 和less-loader这两个包 ， 没有话需要进行下载

yarn add less less-loader --dev

• 确认已经安装好了，然后需要对 config-override.js文件加上几行代码

const {override, fixBabelImports, addLessLoader} = require('customize-cra');
    module.exports = override(
    //针对antd实现按需打包，
        fixBabelImports('import', {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: true,
        }),

        //less-loader
        addLessLoader({
            javascriptEnabled: true,
            modifyVars: {'@primary-color': '#1DA57A'},
        }),
);

• 执行npm start报错，错误如下（最后一个错啦！！！）

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'modifyVars'. These properties are valid:
   object { lessOptions?, additionalData?, sourceMap?, webpackImporter? 

这是一个less-loader版本兼容问题，根据其他人的解答，将自己原来的卸载掉，然后安装一个合适的版本，最后再启动项目就欧克啦，完结撒花❀

a. 卸载
yarn remove less-loader
b. 安装指定版本
yarn add less-loader@5.0.0

• 按照上面的步骤之后又出现了一个新的问题—— 不能实现antd 的按需打包，很明显问题出现在 config-overrieds.js文件的配置上，正确代码如下：

 libraryName: 'antd-mobile',
 style: 'css',

###############################################
2020-12-21 更新

1. 记录一个错误，在写聊天页面的时候，使用socket.io 做小测试的时候，浏览器能向服务器发数据，但是不能接受服务器返回的数据…… 竟然报跨域错误提示，错误截图如下：
   
   于是开始了网上冲浪（瞎找）…… two hours later, 嘻嘻被我找到, 给出链接，【 其实这个时候我就意思到自己并不太习惯去分析错误，也不会去思考哪一步出了问题，只是一味追求效果，只要问题消失了就行，其实这样是不对的，我觉得慢慢培养自己的找错和分析能力是一件特别重要的事情，有时候比你会用工具来的有意义！ 哈哈哈写个鸡汤，鼓励自己，也给正在看这个博客的朋友传递一些正能量~~ 】

正确的解决方法，就是在你的后台文件夹中找到引入 socket.io 的文件，在导入的时候，加上一句{ cors: { origin: '*', } }

成功！！（开心😊）