一、在所有的項目代碼編寫完成後,react項目直接部署是無法正常訪問的 1、問題一 網頁無法正常的瀏覽器刷新,刷新會報404錯,路由找不到頁面 2、問題二 路由跳轉後,瀏覽器後退按鈕點擊後,頁面不刷新 3、問題三 使用HashRouter的react項目會在路由的時候在路徑上添加/#,所以儘量使用B ...
一、在所有的項目代碼編寫完成後,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項目部署