1.媒介

说在最最前

此次分享比较烦琐啦，想说的许多。实际题目的处理是 “2-3.豁然开朗 部份”，能够直接跳过其他过剩的罗唆哦～

近来入职新公司由于前端主如果react，遂最先去进修相识react，这两天随着电子书《The Road to learn React》敲了一遍，稳固了js，熟习了react的基础知识。但在完成末了布置上线是碰到一些小题目，由于搜刮无果，便纪录于此。

由于我用的是nginx服务器，所以这里申明一下是基于nginx的设置， 需求不符能够再找找别的啦

2.罗唆最先

引荐想入门react的同砚去看这本书
《The Road to learn React》,个人觉得很受用。

2-1.一最先很顺畅

起首我此次的项目是用create-react-app这个脚手架搭建的，在package.json内里就有写好剧本敕令，这个东西的readme内里也有引见到。
当须要把项目打包成临盆环境的文件是须要运用的是npm run build这个敕令

npm run build creates a
build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served
index.html, and requests to static paths like
/static/js/main.<hash>.js are served with the contents of the
/static/js/main.<hash>.js file.

这里把官方的引见copy过来凑下字数，趁便本身也许意译一下就是这个敕令会把可供临盆环境运用的文件打包到bulid文件夹中，你须要然后接见者翻开你的网站时能够接见到你的这个index.html，然后就是在index.html内里援用的资本文件的途径也跟资本文件一一对应好了。途径如上所述。

2-2.Boom

由于是本身的项目，本身的云服务器。没那末多考究。项目打包好了今后就直接把build文件夹内里的内容丢到服务器上了，也在nginx设置文件中给location设置好了。

兴致勃勃接见地点想看看进修效果，不出预料，炸了。

我先来看看我做了啥。

• npm run build
• 把build文件夹的内容丢到服务器上
• 设置nginx
• 翻开浏览器
• boom 空缺页面

实在这里页面接见到了，服务器是指向了我的index.html文件的，由于没有404毛病。
既然服务端没错，那就是前端题目，那末就翻开控制台看看，果真报错。

控制台报找不到资本文件，细致一看这里资本文件的途径指的是我服务器的根目录

2-3.豁然开朗

看到控制台报错内容霎时就想邃晓了，本来这里index.html的途径默许是指向相对根目录的，那末晓得题目就最先处理了。
由于之前布置Vue项目时也碰到过这类相似的题目，当时是经由过程修正webpack设置处理的。

由于这里是经由过程create-react-app搭建的项目，所以继承看文档发明

By default, Create React App produces a build assuming your app is hosted at the server root.

To override this, specify the homepage in your package.json, for example:

本来是能够经由过程往package.json增加homepage项完成相对途径的修正的！

like this:

  "homepage": "http://mywebsite.com/relativepath",

2-4.大吉大利

不出不测，随着文档的指导，胜利布置到了服务器上，虽然是个很简单的项目。但本身算是第n次初学react了。遂纪录一下，今后也有迹可循。

3.末了

谢谢浏览！
不足之处，请多指教～