国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React項目服務(wù)端部署過程記錄（create-react-app）

spademan / 2489人閱讀

摘要：但在完成最后部署上線是遇到一些小問題，由于搜索無果，便記錄于此。由于是自己的項目，自己的云服務(wù)器。由于之前部署項目時也碰到過這種類似的問題，當時是通過修改配置解決的。

1.前言

說在最最前

這次分享比較啰嗦啦，想說的很多。實際問題的解決是 “2-3.恍然大悟 部分”，可以直接跳過其他多余的絮叨哦～

最近入職新公司由于前端主要是react，遂開始去學習了解react，這兩天跟著電子書《The Road to learn React》敲了一遍，鞏固了js，熟悉了react的基礎(chǔ)知識。但在完成最后部署上線是遇到一些小問題，由于搜索無果，便記錄于此。

由于我用的是nginx服務(wù)器，所以這里說明一下是基于nginx的配置， 需求不符可以再找找別的啦
2.絮叨開始 
推薦想入門react的同學去看這本書《The Road to learn React》,個人覺得很受用。
2-1.一開始很順暢

首先我這次的項目是用create-react-app這個腳手架搭建的，在package.json里面就有寫好腳本命令，這個工具的readme里面也有介紹到。
當需要把項目打包成生產(chǎn)環(huán)境的文件是需要使用的是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..js are served with the contents of the /static/js/main..js file.

這里把官方的介紹copy過來湊下字數(shù)，順便自己大概意譯一下就是這個命令會把可供生產(chǎn)環(huán)境使用的文件打包到bulid文件夾中，你需要然后訪問者打開你的網(wǎng)站時可以訪問到你的這個index.html，然后就是在index.html里面引用的資源文件的路徑也跟資源文件一一對應(yīng)好了。路徑如上所述。

2-2.Boom

由于是自己的項目，自己的云服務(wù)器。沒那么多講究。項目打包好了之后就直接把build文件夾里面的內(nèi)容丟到服務(wù)器上了，也在nginx配置文件中給location配置好了。

興高采烈訪問地址想看看學習成果，不出意料，炸了。

我先來看看我做了啥。

npm run build

把build文件夾的內(nèi)容丟到服務(wù)器上

配置nginx

打開瀏覽器

boom 空白頁面

其實這里頁面訪問到了，服務(wù)器是指向了我的index.html文件的，因為沒有404錯誤。
既然服務(wù)端沒錯，那就是前端問題，那么就打開控制臺看看，果然報錯。

控制臺報找不到資源文件，仔細一看這里資源文件的路徑指的是我服務(wù)器的根目錄

2-3.恍然大悟

看到控制臺報錯內(nèi)容瞬間就想明白了，原來這里index.html的路徑默認是指向相對根目錄的，那么知道問題就開始解決了。
由于之前部署Vue項目時也碰到過這種類似的問題，當時是通過修改webpack配置解決的。

因為這里是通過create-react-app搭建的項目，所以繼續(xù)看文檔發(fā)現(xiàn)

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項實現(xiàn)相對路徑的修改的！

like this:

  "homepage": "http://mywebsite.com/relativepath",
2-4.大吉大利

不出意外，跟著文檔的指示，成功部署到了服務(wù)器上，雖然是個很簡單的項目。但自己算是第n次初學react了。遂記錄一下，以后也有跡可循。

3.最后

感謝閱讀！
不足之處，請多指教～

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93408.html

相關(guān)文章

  • React項目實踐系列一

    摘要：在此我們選用用友的公共靜態(tài)資源庫。因此打算建立遠程的其實還有個關(guān)鍵是我使用用友配的電腦開發(fā)，在本地部署的話電腦配置。。。不過此步驟我們也可以省略了，用友的大前端技術(shù)團隊提供了平臺。 數(shù)據(jù)分析平臺-實踐系列一 項目創(chuàng)建于2018年1月底，到現(xiàn)在已經(jīng)接近半年，在此寫下半年來項目的實踐過程以及自己對前端的學習與體悟。 技術(shù)選型 框架： React 路由： React-Router 4 狀態(tài)管...

    DC_er 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

    摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...

    call_me_R 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

    摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...

    wzyplus 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

    摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...

    aristark 評論0 收藏0

  • React項目從創(chuàng)建到打包到云服務(wù)器指南

    摘要：一搭建項目二打包三云服務(wù)器設(shè)置一搭建項目這里采用官方提供的腳手架已自動集成相關(guān)配置生成的項目目錄結(jié)構(gòu)如下為什么沒有配置文件的配置需要輸入命令將所有內(nèi)建的配置暴露出來。 一 搭建react項目 二 打包三 云服務(wù)器設(shè)置 一 搭建react項目: 這里采用react官方提供的腳手架 create-react-app (已自動集成webpack相關(guān)配置) 生成的項目目錄結(jié)構(gòu)如下： sh...

    yintaolaowanzi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<