當(dāng)使用Vue、React等框架來構(gòu)建項(xiàng)目，一般都是生成的SPA應(yīng)用（單頁面應(yīng)用）。
如果一個(gè)域名（服務(wù)器）要部署多個(gè)這種SPA應(yīng)用，就需要做打包配置，頁面才能正常的加載和訪問。
UmiJS-Deploy
項(xiàng)目打包配置
- 在
.umirc.ts或config/config.ts中配置
import { defineConfig } from 'umi'
export default defineConfig({
// ...
history: {
type: 'browser', // 瀏覽器history模式，無 # 號(hào)
},
base: '/admin/',
publicPath: '/admin/',
// ...
})
history：type，可選 browser、hash 和 memory。base設(shè)置路由前綴，通常用于部署到非根目錄。
比如，你有路由 / 和 /web，然后設(shè)置了base為/admin/，那么就可以通過/admin/和 /admin/web 訪問到之前的路由。publicPath配置 webpack 的publicPath。當(dāng)打包的時(shí)候，webpack 會(huì)在靜態(tài)文件路徑前面添加publicPath的值，當(dāng)你需要修改靜態(tài)文件地址時(shí)，比如使用 CDN 部署，把publicPath的值設(shè)為 CDN 的值就可以。如果使用一些特殊的文件系統(tǒng)，比如混合開發(fā)或者 cordova 等技術(shù)，可以嘗試將publicPath設(shè)置成./相對(duì)路徑。
如果你的應(yīng)用部署在域名的子路徑上，例如https://www.tiven.cn/admin/ ，你需要設(shè)置publicPath為/admin/`
注意： 相對(duì)路徑 ./ 有一些限制，例如不支持多層路由 /foo/bar，只支持單層路徑 /foo
運(yùn)行 npm run dev
- 結(jié)果展示：
> start
> umi dev
App running at:
- Local: http://localhost:8000 (copied to clipboard)
- Network: http://xx.xxx.xx.xx:8000
訪問時(shí)會(huì)自動(dòng)加上添加的目錄
nginx部署配置
# 靜態(tài)服務(wù)
server {
listen 8080;
server_name 127.0.0.1;
location / {
root /data/www/tiven-web; // 打包后的靜態(tài)文件目錄
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
# 反向代理
location /admin/ {
proxy_pass http://127.0.0.1:8080/;
}
《UmiJS學(xué)習(xí)與實(shí)戰(zhàn)》系列
- UmiJS學(xué)習(xí)與實(shí)戰(zhàn)系列 · 非根目錄配置部署（本文）
- UmiJS學(xué)習(xí)與實(shí)戰(zhàn)系列 · 打包去掉console，開啟Gzip壓縮
歡迎訪問：個(gè)人博客地址
