問題背景
我做了一個React框架的前端的Node項目，是一個單頁面應用。
頁面路由用的是，然后使用了React.lazy在路由層級對每一個不同頁面進行了懶加載，只有打開那個頁面才會加載對應資源。
然后現在我用了Webpack5對項目進行了打包，需要將項目部署到服務器上。
PS：vue項目打包部署同理。
打包好的build文件夾如下圖。
問題解決
方法一：Serve靜態服務器
使用前服務器環境需要安裝好NodeJS和npm。
使用npm -v 和 node -v進行查看。
安裝好之后就要安裝serve。
# 全局安裝serve
npm install -g serve
安裝好之后，將本地打包的build文件夾都上傳到服務器目錄中。
用終端打開對應的項目的文件夾（注意文件路徑是在build文件夾的上一層，如下圖）。
終端輸入serve -s build運行靜態服務器。
運行成功的效果如上圖所示，該項目就運行在指定的端口中，可以輸入 -l 參數，指定運行端口。
serve -s -l 3333 build
方法二：Nginx代理靜態頁面
先確保服務器安裝好Nginx，能正常運行。
將項目的打包build文件夾上傳到服務器中。
然后就是改Nginx的配置文件了。
server
{listen 80;listen 443 ssl http2;server_name xxxxxxxxxxxx; # 改成自己的域名或ip index index.php index.html index.htm default.php default.htm default.html;root /www/frontTeachingSystem/build;#SSL-START SSL相關配置，請勿刪除或修改下一行帶注釋的404規則#error_page 404/404.html;ssl_certificate /www/server/panel/vhost/cert/xxxxxxxxxxxx/fullchain.pem;ssl_certificate_key /www/server/panel/vhost/cert/xxxxxxxxxxxx/privkey.pem;ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;ssl_prefer_server_ciphers on;ssl_session_cache shared:SSL:10m;ssl_session_timeout 10m;add_header Strict-Transport-Security "max-age=31536000";error_page 497 https://$host$request_uri;#SSL-END#ERROR-PAGE-START 錯誤頁配置，可以注釋、刪除或修改#error_page 404 /404.html;#error_page 502 /502.html;#ERROR-PAGE-END#PHP-INFO-START PHP引用配置，可以注釋或修改include enable-php-00.conf;#PHP-INFO-END#REWRITE-START URL重寫規則引用,修改后將導致面板設置的偽靜態規則失效include /www/server/panel/vhost/rewrite/xxxxxxxxxxxx.conf;#REWRITE-ENDlocation / {try_files $uri $uri/ /index.html;}#禁止訪問的文件或目錄location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md){return 404;}#一鍵申請SSL證書驗證目錄相關設置location ~ \.well-known{allow all;}#禁止在證書驗證目錄放入敏感文件if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {return 403;}location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)${expires 30d;error_log /dev/null;access_log /dev/null;}location ~ .*\.(js|css)?${expires 12h;error_log /dev/null;access_log /dev/null;}access_log /www/wwwlogs/xxxxxxxxxxxx.log;error_log /www/wwwlogs/xxxxxxxxxxxx.error.log;
}
以上是我的Nginx的配置文件，我是弄了SSL證書的。
注意一定要加下面這段。
location / {try_files $uri $uri/ /index.html;
}
因為我部署的是單頁面應用，頁面的路由是虛擬路由，實際并沒有對應的文件，如果不加這個的話，路由跳轉時Nginx會去尋找對應的文件，導致找不到文件404錯誤，項目無法正常運行。
我一開始在網上搜索資料的時候，查到的讓把"root"屬性的文件路徑改在build文件夾的上一層，然后在index屬性中加入"build"，像下面這樣
server
{listen 80;listen 443 ssl http2;server_name xxxxxxxxxxxx; # 改成自己的域名或ip index build index.php index.html index.htm default.php default.htm default.html;root /www/frontTeachingSystem;
}
但我試了下不能正常運行，改成上面的那樣就可以了。
