美文网首页
【React开发报错集锦】

【React开发报错集锦】

作者: AI_Finance | 来源:发表于2022-04-17 18:26 被阅读0次
    1、Can't resolve 'axios' in "Your Project PATH"?
    
    这个问题属于你的项目未安装axios,在项目根目录下运行以下命令即可:
    npm install --save axios
    
    2、在react项目调试的时候,为什么有时候会出现空白页面,点击浏览器页面的Inspect Element会出现“You need to enable JavaScript to run this app”这样的提示?
    
    空白页面正是你的项目的public/index.html中的内容,
    “You need to enable JavaScript to run this app”的提示也一同出现在public/index.html中,出现这样的情况说明你的react项目没有渲染任何结果,只是返回了public/index.html中的内容.
    
    对react项目来说,public/index.html是整个项目的入口, 在这个入口文件中定义了root节点,通常在src/index.js则是通过路由机制挂载src/App.js的组件节点。而整个工程的其他组件则挂载在src/App.js的节点上,从而逐渐构建出整个项目的页面渲染内容。
    
    而对react项目来说src/index.js是整个项目的js的运行入口文件,那么根据提示来说“You need to enable JavaScript to run this app”,这说明你的项目的js文件根本没有得到执行,因此出现这个问题一般都是script/start.js出现了问题,需要在script/start.js启动脚本中去排查问题。
    
    从上面的描述中,可知道一旦react项目提示JavaScript不能正常运行,那就是是scripts/start.js的脚本出了问题,现在定位到问题,下面就是分析问题产生的原因。
    
    在出现“You need to enable JavaScript to run this app”这个提示之后,其实还有一个连带现象,那就是浏览器中的地址也变化了,不在是host:port这种形式,而我们顺着浏览器的地址这个思路往下去分析发现了原因
    
    
    在scripts/start.js中,有这样一个函数来控制着react项目启动后的浏览器地址
      const urls = prepareUrls( protocol, HOST, port, paths.publicUrlOrPath.slice(0, -1));
    这个函数的最后一个参数paths则是来源于config/paths.js中,具体函数如下:
    const publicUrlOrPath = getPublicUrlOrPath(
      process.env.NODE_ENV === 'development',
      require(resolveApp('package.json')).homepage,
      process.env.PUBLIC_URL
    );
    
    由此我们发现了最终问题所在,正是我们的package.json中配置了homepage的地址,导致了config/paths.js的publicUrlOrPath路径出现了错误,而publicUrlOrPath又影响了urls的参数,从而导致项目启动中出现了错误的浏览器地址,也就出现了“You need to enable JavaScript to run this app”。
    
    解决方案简单那就是:删除package.json的homepage参数。
    至此,一切都可以正常运行了。
    
    3、react项目通过node scripts/build.js生成的build目录,上传到Linux服务器后,执行serve -s提示无法找到serve命令,该如何安装serve?
    
    执行npm install -g serve
    
    4、在linux里执行node XX.js测试异步请求时,提示报错:Cannot find module 'axios',该如何解决?
    
    这个问题属于你的项目未安装axios,在项目根目录下运行以下命令即可:
    npm install --save axios
    
    5、对react项目执行了npm init -y后项目无法正常运行了,怎么解决?
    
    执行npm init -y后,react项目一般会重新生成package.json,这个新文件重要的一点是会有homepage字段,这个字段的出现会影响项目启动阶段的urls,造成运行后页面的路由地址异常,大家可以在浏览器地址栏得到相应的验证。
    
    解决办法就是运行完npm init -y之后,最好手动删除homepage字段
    
    6、react项目初始化的时候,执行npm install去安装node_module中的依赖,发现全部报错导致项目初始化失败,报错的提示是:Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin"} (current: {"os":"linux","arch":"x64"}),请问该如何解决?
    
    项目初始化出现执行fsevents安装失败导致npm install失败,这个时候要检查package.json, 如果这里的dependencies字段出现了对fsevents的依赖,可以手动删除后再安装npm install。
    
    这个问题出现的原因多半是因为项目在mac下开发,但是由于某些原因,比如为了访问本地无法访问的域名而迁移到linux执行某些测试或部署而产生。
    
    7、如何清除npm的缓存?
    
    清除命令:npm cache clean --force
    清除后验证命令:npm cache verify
    
    8、npm install主要做什么?
    
    在本地开发阶段:npm install一般用于手动删除node_module后,用于重新安装依赖包;
    此外,通常如果用git管理版本,node_module都在.gitignore中,不会传到github上,如果代码是从github上下载的话,第一步都需要做npm install。
    
    9、react项目中,npm init -y主要做什么?
    
    主要用于重新生成package.json
    
    10、如何查看某一工程的git配置?
    
    进入工程根目录,执行git config --list
    
    11、npm如何查看及管理镜像源?
    
    1、首先安装镜像源管理工具nrm:npm install -g nrm
    2、其次执行:nrm ls,*表示正在使用的
            * npm -------- https://registry.npmjs.org/       
          yarn ------- https://registry.yarnpkg.com/     
          cnpm ------- http://r.cnpmjs.org/
          taobao ----- https://registry.npm.taobao.org/  
          nj --------- https://registry.nodejitsu.com/   
          npmMirror -- https://skimdb.npmjs.com/registry/
          edunpm ----- http://registry.enpmjs.org/  
    3、国内建议切换镜像源:nrm use taobao;AWS的话建议用yarn源;
    4、如果第三步设置的源失败,可以使用如下方式设置源:
                       npm config set registry https://registry.yarnpkg.com/
          验证:npm config get registry
    
    12、如何用yarn为react项目安装依赖,比如axios?
    
    执行以下命令:yarn add axios;
    其中yarn版本为1.22.17,yarn安装依赖比npm快很多,建议优先使用
    
    13、如何查看亚马逊云aws的系统版本?
    
    执行cat /etc/system-release;返回:Amazon Linux release 2 (Karoo)
    
    14、如何查看npm的配置?
    
    执行以下命令:npm config get
    
    15、react项目如何打包运行?
    
    分别执行以下命令:
    npm run build
    cd build
    serve -s
    
    16、如何用curl在Linux环境下调试币安的行情数据请求?
    
    执行以下命令:
    curl -X GET "https://api.binance.com/api/v3/klines?symbol=BTCUSDT&interval=5m"
    注意:在AWS的linux服务器上,必须对url添加引号,否则请求失败
    

    17、什么是跨域?

    以react开发web应用为例,如果你的当前html网页中,使用axios调用了某个网站的资源,如果你的网页地址与axios调用的url存在网络协议、域名或端口不一致的情况即属于跨域
    

    18、如何在Linux实现免密钥使用

    在终端直接输入:git config --global credential.helper store
    提交一次代码或拉取一次(目的是输入一次git的用户名与密码,该命令是让系统记住用户名与密码),后续即可以免密钥使用
    

    相关文章

      网友评论

          本文标题:【React开发报错集锦】

          本文链接:https://www.haomeiwen.com/subject/ywplertx.html