当使用Vue、React等框架来构建项目,一般都是生成的SPA应用(单页面应用)。 注意: 相对路径 ./ 有一些限制,例如不支持多层路由 /foo/bar,只支持单层路径 /foo
如果一个域名(服务器)要部署多个这种SPA应用,就需要做打包配置,页面才能正常的加载和访问。一、项目打包配置
import { defineConfig } from 'umi'
export default defineConfig({
// ...
history: {
type: 'browser', // 浏览器history模式,无 # 号
},
base: '/admin/',
publicPath: '/admin/',
// ...
})
比如,你有路由 / 和 /web,然后设置了 base 为 /admin/,那么就可以通过 /admin/ 和 /admin/web 访问到之前的路由。
如果你的应用部署在域名的子路径上,例如 https://www.tiven.cn/admin/ ,你需要设置publicPath为/admin/`二、运行 npm run dev
> start
> umi dev
App running at:
- Local: http://localhost:8000 (copied to clipboard)
- Network: http://xx.xxx.xx.xx:8000
三、访问时会自动加上添加的目录
四、nginx部署配置
# 静态服务
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/;
}