【React开发报错集锦】

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 [email protected]: 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的用户名与密码,该命令是让系统记住用户名与密码),后续即可以免密钥使用

19、如何运行docker容器?

sudo docker run -it xxx/xxx /bin/bash  # 开启容器,使用docker进行标准化部署

20、如何解决“access denied for user 'root'@'%' to database 'crypto'”

... ...
mysql> UPDATE mysql.user SET Grant_priv='Y', Super_priv='Y' WHERE User='root';
Query OK, 1 row affected (0.00 sec)
Rows matched: 1  Changed: 1  Warnings: 0

mysql> flush privileges;
Query OK, 0 rows affected (0.00 sec)

21、Linux如何设置时间

在Linux的终端输入命令:# tzselect,然后根据提示选择即可设置时间;
在选择完成后,将TZ='Asia/Shanghai'; export TZ 命令添加到~/.bash_profile中即可

22、解压tar.xz文件

执行如下命令即可:tar xvJf ffmpeg-4.2.2.tar.xz

23、如何预防mysql数据库被攻击?

在生产环境中,将mysql取消远程访问,且把访问权限仅面向特定的ip开放,比如:
1、use mysql; 
2、update user set host = '218.81.38.86' where user ='root'; 
3、flush privileges;

24、git如何实现一次输入密码后,后续push和pull都免密使用

git bash进入你的项目目录,输入:
git config --global credential.helper store
然后你会在你本地生成一个文本,上边记录你的账号和密码。当然这些你可以不用关心。
然后你使用上述的命令配置好之后,再操作一次git pull,然后它会提示你输入账号密码,这一次之后就不需要再次输入密码了。

你可能感兴趣的:(【React开发报错集锦】)