搭个大屏项目的脚手架

构建命令

pnpm i # 装依赖
pnpm dev # 本地开发
pnpm build:dev # 开发服务器生产环境打包
pnpm build:test # 测试服务器生产环境打包
pnpm build:prod # 生产服务器生产环境打包
pnpm preview # 本地打包并预览打包后的页面

大屏

核心组件

踩坑

# 大的屏幕显示正常,小屏幕缺换行了?
Chrome默认的最小字体大小是12px,所以需要修改chrome最小字号为0,从而适配小屏幕
chrome://settings/fonts

# 如何修改让项目成为某个项目的子路由?
1. 修改 vite.config.js 的 base 配置(注意末尾加上斜杠)
base: process.env.VITE_MODE === 'local' ? '/' : '/dashboard/',
2. 修改 BrowserRouter 的 basename
<BrowserRouter basename={VITE_MODE === 'local' ? '/' : '/dashboard'} >
3. 修改nginx
server {
 listen 8080;
 server_name localhost;
 charset utf-8,gbk;
 location / {
 root /home/xxx/project111/dist;
 try_files $uri $uri/ /index.html;
 }
 location /dashboard {
 # 这里必须使用 alias,细节看链接
 # https://www.jianshu.com/p/d9aefefcaa45
 alias /home/xxx/project222/dist/;
 # 这里的最后必须使用 `/dashboard/index.html`,如果使用 `/index.html`,则在路由为 `/dashboard/page1`
 # 的页面刷新后,会重置到 `/`,从而访问 project111 的资源
 try_files $uri $uri/ /dashboard/index.html;
 }
}