react使用create-react-app創建的項目部署


一、在所有的項目代碼編寫完成后,react項目直接部署是無法正常訪問的

    1、問題一

          網頁無法正常的瀏覽器刷新,刷新會報404錯,路由找不到頁面

    2、問題二

          路由跳轉后,瀏覽器后退按鈕點擊后,頁面不刷新

    3、問題三

          使用HashRouter的react項目會在路由的時候在路徑上添加/#,所以盡量使用BrowserRouter。

二、正確部署

     1、在public文件夾下添加.htaccess文件,用記事本或編輯器打開,將下列代碼拷貝到文件中,並保存

RewriteEngine On
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !\.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$
RewriteRule . index.html [L]

 2、在react項目的根目錄使用  npm run-script build打包文件,顯示如下信息為打包成功

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  118.12 KB  build\static\js\main.781fed84.js
  60.21 KB   build\static\css\main.4ef2f659.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  http://bit.ly/2vY88Kr

  3、最后將打包后生成的build文件部署到服務器上

參考鏈接:鏈接一,react項目部署

                  鏈接二,react項目部署


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM