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

資訊專欄INFORMATION COLUMN

create-react-app項目部署到Github Pages

levy9527 / 747人閱讀

摘要：描述本文講解使用創(chuàng)建的項目，如何部署，以及這部署到過程中遇到到坑。增加命令，推送加上這一句推送項目只是部署項目，代碼直接放上去是識別不了的，所以部署的是打包編譯后到代碼。

描述

本文講解使用create-react-app創(chuàng)建的項目，如何部署GitHub Pages，以及這部署到過程中遇到到坑。

創(chuàng)建項目

使用官網(wǎng)方式創(chuàng)建項目。

npx create-react-app my-app
cd my-app
npm install

彈出配置

npm run eject
Github Pages部署講解

把項目部署成github pages，在github上點開項目到設(shè)置，翻到Github Pages設(shè)置處，可以看到Github Pages只能使用master、gh-pages分支或者master下面的docs文件夾。
我們這里使用的是gh-pages分支的方式來創(chuàng)建。

安裝gh-pages 
npm install gh-pages --save-dev

通過gh-pages中間件可以把build文件下到文件推送到github，并且創(chuàng)建gh-pages branch。

修改package.json

增加homepage

  "name": "react_demo",
  "version": "1.1.0",
  "private": true,
  "homepage": "./",  //加上這一句
注意：homepage不要設(shè)置成github page上生成的那個鏈接路徑，比如https://username.github.io/react_demo/。
如果設(shè)置成上面的連接，build打的包會這所有路徑前面加上react_demo。
比如index.html文件中對同等目錄下的文件引用應(yīng)該是src="./index.css",結(jié)果會變成src="./react_demo/index.css",這樣部署后肯定無法訪問，所有資源都找不到。

增加npm scripts命令，推送gh-pages

"scripts": {
        ...
     + "deploy": "gh-pages -d build" //加上這一句
}
推送項目

GitHub Pages只是部署項目，react代碼直接放上去是識別不了的，所以部署的是打包編譯后到代碼。

npm run build

編譯后就可以推送了,執(zhí)行上面配置的命令。

npm run deploy

這時github上項目就多出了一個gh-pages的branch，在設(shè)置中Github Pages處選擇gh-pages分支保存，部署完成。
點擊生成的連接，查看是否部署成功。

2019-05-25

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

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

相關(guān)文章

  • 使用npm-scripts發(fā)布Github Pages

    摘要：使用發(fā)布將項目打包后部署到上是常見需求。需要使用到的庫。關(guān)于的知識，參考使用指南用打造超溜的前端工作流需付費修改此時，雖然可以發(fā)布，但所有相關(guān)的靜態(tài)文件的目錄都是指向的，而實際的靜態(tài)文件的位置是在中。 使用npm-scripts發(fā)布Github Pages 將項目打包后部署到GitHub Pages 上是常見需求。這里總結(jié)下通過npm-srcrips將項目發(fā)布到gh-pages分支。需...

    cloud 評論0 收藏0

  • 官方create-react-app 入門（一）

    摘要：目的希望找到像類似的腳手架，便于入門。參考地址系統(tǒng)過程將升級到以上，將有一個新的包，。目錄地點運行開發(fā)環(huán)境測試運行發(fā)布環(huán)境。我這次暫且選在充當(dāng)發(fā)布環(huán)境。在中添加或者結(jié)果就可以在中看到發(fā)布后的項目。 目的： 希望找到像Vue-cli類似的腳手架，便于入門。 通過此項目學(xué)習(xí)React。 參考地址： https://github.com/facebook/c... 系統(tǒng)： macOS 過...

    _ang 評論0 收藏0

  • React 實踐項目 （五）Docker Nginx 部署 React

    摘要：在上已經(jīng)有接近的數(shù)了，是目前最熱門的前端框架。將整個應(yīng)用打包發(fā)布，自動試用進行壓縮與優(yōu)化。毫無疑問，這些重?fù)?dān)都將壓在企業(yè)開發(fā)人員身上團隊之間如何高效協(xié)調(diào)，快速交付產(chǎn)品，快速部署應(yīng)用，以及滿足企業(yè)業(yè)務(wù)需求，是開發(fā)人員亟需解決的問題。 React在Github上已經(jīng)有接近70000的 star 數(shù)了，是目前最熱門的前端框架。而我學(xué)習(xí)React也有一段時間了，現(xiàn)在就開始用 React+Red...

    EscapedDog 評論0 收藏0

  • React 實踐項目 （五）Docker Nginx 部署 React

    摘要：在上已經(jīng)有接近的數(shù)了，是目前最熱門的前端框架。將整個應(yīng)用打包發(fā)布，自動試用進行壓縮與優(yōu)化。毫無疑問，這些重?fù)?dān)都將壓在企業(yè)開發(fā)人員身上團隊之間如何高效協(xié)調(diào)，快速交付產(chǎn)品，快速部署應(yīng)用，以及滿足企業(yè)業(yè)務(wù)需求，是開發(fā)人員亟需解決的問題。 React在Github上已經(jīng)有接近70000的 star 數(shù)了，是目前最熱門的前端框架。而我學(xué)習(xí)React也有一段時間了，現(xiàn)在就開始用 React+Red...

    jsyzchen 評論0 收藏0

  • React 實踐項目 （五）Docker Nginx 部署 React

    摘要：在上已經(jīng)有接近的數(shù)了，是目前最熱門的前端框架。將整個應(yīng)用打包發(fā)布，自動試用進行壓縮與優(yōu)化。毫無疑問，這些重?fù)?dān)都將壓在企業(yè)開發(fā)人員身上團隊之間如何高效協(xié)調(diào)，快速交付產(chǎn)品，快速部署應(yīng)用，以及滿足企業(yè)業(yè)務(wù)需求，是開發(fā)人員亟需解決的問題。 React在Github上已經(jīng)有接近70000的 star 數(shù)了，是目前最熱門的前端框架。而我學(xué)習(xí)React也有一段時間了，現(xiàn)在就開始用 React+Red...

    ephererid 評論0 收藏0

發(fā)表評論

0條評論

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