UmiJS学习与实战系列 · 非根目录配置部署


字数:498 阅读时长:2分钟 阅读:85

当使用VueReact等框架来构建项目,一般都是生成的SPA应用(单页面应用)。
如果一个域名(服务器)要部署多个这种SPA应用,就需要做打包配置,页面才能正常的加载和访问。

UmiJS-Deploy

项目打包配置

  • .umirc.tsconfig/config.ts 中配置
1
2
3
4
5
6
7
8
9
10
11
import { defineConfig } from 'umi'

export default defineConfig({
// ...
history: {
type: 'browser', // 浏览器history模式,无 # 号
},
base: '/admin/',
publicPath: '/admin/',
// ...
})
  • history:type,可选 browser、hash 和 memory。

  • base 设置路由前缀,通常用于部署到非根目录。
    比如,你有路由 / 和 /web,然后设置了 base/admin/,那么就可以通过 /admin/ 和 /admin/web 访问到之前的路由。

  • publicPath 配置 webpack 的 publicPath。当打包的时候,webpack 会在静态文件路径前面添加 publicPath 的值,当你需要修改静态文件地址时,比如使用 CDN 部署,把 publicPath 的值设为 CDN 的值就可以。如果使用一些特殊的文件系统,比如混合开发或者 cordova 等技术,可以尝试将 publicPath 设置成 ./ 相对路径。
    如果你的应用部署在域名的子路径上,例如 https://www.tiven.cn/admin/ ,你需要设置publicPath/admin/`

注意: 相对路径 ./ 有一些限制,例如不支持多层路由 /foo/bar,只支持单层路径 /foo

运行 npm run dev

  • 结果展示:
1
2
3
4
5
6
> start
> umi dev

App running at:
- Local: http://localhost:8000 (copied to clipboard)
- Network: http://xx.xxx.xx.xx:8000

访问时会自动加上添加的目录

nginx部署配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 静态服务
server {
listen 8080;
server_name 127.0.0.1;

location / {
root /data/www/tiven-web; // 打包后的静态文件目录
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}

# 反向代理
location /admin/ {
proxy_pass http://127.0.0.1:8080/;
}

《UmiJS学习与实战》系列


欢迎访问:个人博客地址

本文作者: Tiven
发布时间: 2021-09-07
最后更新: 2021-12-10
本文标题: UmiJS学习与实战系列 · 非根目录配置部署
本文链接: https://www.tiven.cn/p/acd6a378/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^