React專案的打包與部署到騰訊雲

2021-08-19 02:24:57 字數 1530 閱讀 3942

npm

執行完上述命令,開啟本地瀏覽器,輸入localhost:3000,就能看到專案的執行效果。此時是開發模式。

若使用npm run build,**會被編譯到build目錄。將整個應用打包發布,自動試用webpack進行壓縮與優化。

在專案路徑下,敲npm run buil,就出現了build資料夾,同時終端顯示這些文字:

大致意思是:已經編譯好啦。build生成的這些東西要放在伺服器root下,可以在pakege.json裡,根據綠字裡的例子,再重寫。

也能讓它充當靜態的伺服器,敲:npm install -g serve,在敲serve -s build,就可以了。

登陸時輸入的密碼會和設定密碼不一致,造成無法登陸.....這個問題解決了好久。

登陸好了以後,左邊是本地的檔案,右邊是伺服器上的,選擇資料夾上傳,就能傳到伺服器上了。

在伺服器上,也要配置一下環境的。最基本的是安裝node和npm,有很多教程,這裡就不贅述了。附上幾個博文,感謝原作者的分享:

ubuntu下nodejs安裝與版本公升級:

我們把build資料夾傳到伺服器上去之後,然後在伺服器的命令列裡,進入build資料夾,直接敲:serve -s,就啟動了這個專案。外網也能訪問了。

易錯點: 要麼進入build資料夾後,敲serve -s;要麼在build目錄的上一級,敲serve -s build。都能使得編譯後的react專案正確執行。

如果在build目錄的上一級,敲了:serve -s,那麼訪問localhost:5000時,會出現這樣的頁面:

相當於把當前目錄當做伺服器根目錄了。

而如果在build裡,還敲了serve -s build,因為已經在build裡了,所以會出現沒有build資料夾的報錯:

一些雜項:

本地終端登陸伺服器:ssh 使用者名稱@伺服器外網名。例如:ssh [email protected]

然後輸入密碼,不回顯。注意要安裝有ssh和擁有administrator的許可權才能登陸。windows下的ssh配置我用的是這個,一直點下一步就行:

React專案的打包與部署

打包編譯 執行完上述命令,開啟本地瀏覽器,輸入localhost 3000,就能看到專案的執行效果。此時是開發模式。若使用npm run build,會被編譯到build目錄。將整個應用打包發布,自動試用webpack進行壓縮與優化。在專案路徑下,敲npm run buil,就出現了build資料夾...

React專案的打包與部署到騰訊雲

npm 執行完上述命令,開啟本地瀏覽器,輸入localhost 3000,就能看到專案的執行效果。此時是開發模式。若使用npm run build,會被編譯到build目錄。將整個應用打包發布,自動試用webpack進行壓縮與優化。在專案路徑下,敲npm run buil,就出現了build資料夾,...

React專案的打包步驟

執行完上述命令,開啟本地瀏覽器,輸入localhost 3000,就能看到專案的執行效果。此時是開發模式。若使用npm run build,會被編譯到build目錄。將整個應用打包發布,自動試用webpack進行壓縮與優化。在專案路徑下,敲npm run build,就出現了build資料夾,同時終...