# 本地开发 node >= 16
# 打包 node >= 12.18.1
- 在项目根目录下新建
.env.local
文件,内容如下:
# !!! 变量名必须以 VITE_ 开头
# 使用 import.meta.变量名 获取
VITE_TITLE = '小黑管理后台'
# 后端使用 nginx 代理来跨域时,使用绝对路径
# 模拟与真实共存,路径不能重复,不然就无法发出真实请求
VITE_BASE_HTTP = '/mockapi'
# websocket 连接地址,使用NGINX代理时为绝对路径,其他情况需要使用带协议的完整路径
VITE_BASE_WS = '/wss'
# 真实地址(树莓派内网穿透)
VITE_PI_HTTP = 'http://frp.104300.xyz:15151/api/admin'
VITE_PI_WS = 'ws://frp.104300.xyz:15151/wss/admin'
# 是否启用真实请求混入(关闭时无需设置)
VITE_ENABLE_PI = true
yarn build
因生产需要,将 node 运行内存设为了 1G(1024)
yarn build:prod
无内存限制
- 推荐使用(
yarn build | yarn build:prod | yarn build:prod.nginx
)
- 生产模式下包的体积最小(各种摇树优化)
# 装依赖
yarn
# 升级最新依赖(同时更新 yarn.lock 和 package.json)
yarn upgrade-interactive --latest
# 手动升级特定版本
yarn upgrade package-name@version
# 本地运行(请求真实开发服服务器)
yarn dev
# 本地运行(使用自定义vite插件注入的中间件实现 mock,可以在控制台看到真实的请求)
yarn dev:mock
# 本地运行(请求测试服务器)
yarn dev:test
# 本地运行(请求正式服务器)
yarn dev:prod
# ------ 本地运行及打包 ------
# --- 依赖 .env.{MODE}.local 内部的环境变量 ---
# 打mock包
yarn build:mock
# 打开发服包
yarn build:dev
# 打开发服包(后端配置了 nginx 代理,请求'/api/dev')
yarn build:dev.nginx
# 打测试服包
yarn build:test
# 打测试服包(后端配置了 nginx 代理,请求'/api/test')
yarn build:test.nginx
# 打正式服包
yarn build:prod
# 打正式服包(后端配置了 nginx 代理,请求'/api/prod')
yarn build:prod.nginx
# 本地预览打包后的页面
yarn pre
# ------ 服务器打包 ------
# 1. 注入环境变量
# VITE_BASE_HTTP = '接口请求地址(必须)'
# VITE_TITLE = '后台标题(可选)'
# 2. 打包
yarn build
- 快捷指令
yarn create-new-page
- 命令行:
- 装完依赖之后,需要执行
npm link ./bin
- 执行完成之后可以直接在命令行输入
create-new-page
即可(拥有命令自动补全)
- 在线预览(Mock)
- 在线预览(树莓派内网穿透服务器,可能不在线)
- 本项目创意源自 Vue-Element-Admin
- 主用技术栈:Vue3 Element-Plus TypeScript
- 此版本为 admin-vue3-element3 的改进版:
- 使用 windicss,零配置自动 css 摇树优化
- 拥有自动创建页面的 node 脚本,实现页面创建及路由注册自动化