React打包部署

2022-09-01 16:27:18 字數 892 閱讀 5789

筆記來自

首屏優化

前言

腳手架配置檔案是隱藏的，需要先使用命令顯示，怎麼顯示檢視【react-router】筆記

前文已經有的配置

打包配置

// config/paths.js


module.exports = ;


// 路徑錯誤原因，檢視打包檔案的index.html


//// 可以看到打包出來的js的訪問路徑是 localhost/static/js/main.dbaa987b.chunk.js


// 但實際上應該是 localhost/打包的資料夾名字/static/js/main.dbaa987b.chunk.js


// 這個錯誤跟vue的腳手架錯誤是一樣的，應該把打包配置進行修改讓結果是


//// scripts/builds.js


const paths = require('../config/paths');


// 在引入paths的**後直接修改publicurlorpath引數


paths.publicurlorpath = "/tt/";


// 再次打包就可以了


// 把打包的整個資料夾丟入nginx/html資料夾裡，然後修改nginx.config就行
部署

server 


error_page   500 502 503 504  /50x.html;


location = /50x.html 


}

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專案的打包與部署到騰訊雲

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