1. 打包完后index.html的路徑問(wèn)題
如果不特意配置的話拴疤，默認(rèn)打包完后打開(kāi)index.html頁(yè)面是錯(cuò)誤的簸州，因?yàn)樗皇且粋€(gè)完整的頁(yè)面鹏秋，所有依賴路徑獲取的文件(.js||.css等)都not found .
打包前在package.json文件里添加一個(gè)配置："homepage":".",究履，打包之后資源文件路徑前面都會(huì)加上一個(gè)點(diǎn)，然后在執(zhí)行npm run build
{
"name": "xxx",
"version": "0.1.0",
"private": true,
"homepage":".",
"dependencies": { ....
}
打包過(guò)程及執(zhí)行成功：
> xxx@0.1.0 build /home/fantj/Data/WebstormProjects/xxx
> react-scripts build
Creating an optimized production build...
Compiled with warnings.
./src/pages/login/store/actionCreators.js
Line 2: 'fromJS' is defined but never used no-unused-vars
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:
86.58 KB build/static/js/1.37179901.chunk.js
9.62 KB build/static/js/main.a132d79f.chunk.js
763 B build/static/js/runtime~main.229c360f.js
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:
npm install -g serve
serve -s build
Find out more about deployment here:
http://bit.ly/CRA-deploy
2. 靜態(tài)的服務(wù)器搭建
安裝serve
sudo npm install serve
完事后注意設(shè)置node環(huán)境變量驹饺，不然執(zhí)行serve時(shí)會(huì)報(bào)錯(cuò)bash: serve: command not found,這是因?yàn)槟惚镜貨](méi)有node的環(huán)境變量肺樟，需要手動(dòng)添加一下，提示:npm prefix -g可以查看node安裝路徑逻淌。
[fantj@localhost xxx]$ serve -v
10.1.1
啟動(dòng)服務(wù)
By default, serve will listen on 0.0.0.0:5000 and serve the current working directory on that address. 默認(rèn)啟動(dòng)5000端口而且暴露當(dāng)前的目錄。
單單執(zhí)行serve:
會(huì)將本地目錄暴露到服務(wù)中疟暖。
[fantj@localhost ~]$ serve
┌──────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:45265 │
│ - On Your Network: http://127.0.0.1:45265 │
│ │
│ This port was picked because 5000 is in use. │
│ │
│ Copied local address to clipboard! │
│ │
└──────────────────────────────────────────────────┘
訪問(wèn)http://localhost:45265:
這是我本地的目錄卡儒，局域網(wǎng)可以訪問(wèn)～用途自己腦補(bǔ)～
如果需要構(gòu)建該目錄下的指定項(xiàng)目:
serve -s build
[fantj@localhost xxx]$ serve -s build/
┌───────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://127.0.0.1:5000 │
│ │
│ Copied local address to clipboard! │
│ │
└───────────────────────────────────────────────┘
然后訪問(wèn)http://localhost:5000 則會(huì)跳轉(zhuǎn)到index.html 頁(yè)面。官方是這么介紹的Rewrite all not-found requests to index.html,意思是不管index.html是否存在俐巴，它都會(huì)去映射該文件骨望。
拓展
其它serve的可選參數(shù)。
-v欣舵， - version顯示當(dāng)前版本的服務(wù)
-d擎鸠， - debug顯示調(diào)試信息
-c， - config指定`serve.json`的自定義路徑
-n缘圈， - no-clipboard不要將本地地址復(fù)制到剪貼板
-l , 指定要監(jiān)聽(tīng)的URI端口
[fantj@localhost xxx]$ serve -l 55555
┌────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:55555 │
│ - On Your Network: http://127.0.0.1:55555 │
│ │
│ Copied local address to clipboard! │
│ │
└────────────────────────────────────────────────┘
