vue-pure-admin 快速上手4 步跑通 Vue3 后台项目Docker 一键部署到服务器【免费下载链接】vue-pure-admin全面ESMVue3ViteElement-PlusTypeScript编写的一款后台管理系统兼容移动端项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-adminvue-pure-admin 是一套基于 Vue 3.5 Vite 8 Element Plus TypeScript 的 ESM 后台管理系统模板把登录认证、菜单权限、多布局、国际化这些中后台必备能力做成了开箱即用的样子。读完本文你能在本地几分钟内看到登录页改掉 3 处关键配置并用一条 Docker 命令把它部署到服务器。项目定位与适用场景vue-pure-admin 适合谁先看技术栈底数均来自仓库 README.md 与 package.json维度版本/说明框架Vue 3.5.41 Pinia 4 Vue Router构建Vite 8.2.2全 ESM 编写UIElement Plus 2.14.5 TailwindCSS 4语言TypeScript 6.0运行要求Node 22.22.1pnpm 11适合谁需要从零搭一个中后台、但不想自己写登录/权限/布局骨架的开发者或前端小组。特色内置 mock 接口不依赖后端就能完整体验登录、角色权限admin/common 两套角色。与同类方案差异纯 ESM 精简依赖没有历史包袱布局、主题、多标签页等配置集中在少数环境变量和 store 里改造成本比大而全的框架低。不适合只需要一个静态官网或者团队只熟 Vue 2 的场景。4 步跑通项目vue-pure-admin 本地启动登录页第 1 步克隆代码git clone https://gitcode.com/GitHub_Trending/vu/vue-pure-admin cd vue-pure-admin目录里能看到package.json、pnpm-lock.yaml、.env三个文件就算成功。第 2 步确认环境版本node -v pnpm -vNode 必须 22.22.1仓库.nvmrc建议 24.19.0pnpm 必须 11。版本不达标会直接安装失败先升级 Node 再继续。第 3 步安装依赖pnpm install项目用preinstall: npx only-allow pnpm锁死了包管理器用 npm 或 yarn 会立刻报错。装完出现node_modules且无红色报错即成功。第 4 步启动开发服务器pnpm dev浏览器访问http://localhost:8848注意是 8848 而不是 80出现登录页后输入默认账号admin、密码admin123进入首页看到仪表盘即全链路跑通。跑通后必改的几个关键配置3 处最影响你1. 端口与部署路径.env与.env.production.env里的VITE_PORT 8848决定本地访问地址8848 被占用时改成VITE_PORT 9999再重启即可。生产打包路径看.env.production的VITE_PUBLIC_PATH /如果你的站点挂在/admin子目录这里要同步改成/admin/否则静态资源全部 404。2. 路由模式与压缩.env.productionVITE_ROUTER_HISTORY hash VITE_COMPRESSION none默认hash模式刷新不白屏、Nginx 零配置新手建议保留切h5后需要在 Nginx 加try_files $uri $uri/ /index.html;。把VITE_COMPRESSION改成brotli可给产物生成 .br 压缩文件配合 Nginx 的brotli_static on能明显减小传输体积——这是仓库自带的性能开关不用额外装插件。3. 跨域代理vite.config.tsserver.proxy: {}目前为空。本地联调真实后端时在这里加一条规则如/api: { target: http://后端地址, changeOrigin: true }前端请求就能免跨域直达后端。接完真实后端后记得去掉mock/目录里对应的假接口避免两边打架。从本地到服务器vue-pure-admin Docker 最稳部署方式仓库自带多阶段 Dockerfilenode:20-alpine负责构建已内置 npmmirror 镜像源加速产物拷进nginx:stable-alpine对外服务.dockerignore已排除node_modules等无关文件构建上下文很干净。1. 构建镜像docker build -t vue-pure-admin .构建成功会输出Successfully built开头的镜像 ID。2. 启动容器docker run -d -p 8080:80 --name pure-admin vue-pure-admin把容器 80 端口映射到主机 8080-d让它在后台常驻。3. 验证部署curl -I http://localhost:8080返回HTTP/1.1 200即 Nginx 已就绪浏览器打开http://localhost:8080用admin/admin123登录成功部署完成。高频坑位速查vue-pure-admin 安装部署 5 个常见坑现象pnpm install 立刻报 ERR_PNPM 或 preinstall 失败。原因项目强制只允许 pnpm。修复统一改用 pnpm别混用 npm/yarn。现象pnpm dev 起来了但页面空白。原因默认端口是 8848很多人按 5173 访问。修复改访问地址或在.env里改VITE_PORT。现象Node 低版本安装报 ERR_OSSL 或语法错误。原因engines 要求 Node 22.22.1。修复升级到 Node 22建议对齐.nvmrc的 24.19.0再装依赖。现象线上刷新子页面白屏。原因把路由切成了h5模式但 Nginx 没配回退。修复Nginx 加try_files $uri $uri/ /index.html;或改回hash。现象docker build 卡在依赖下载。原因走了海外源。修复Dockerfile 已配置 npmmirror确认没改错npm config set registry那行即可必要时检查宿主机网络。从克隆、启动、改配置到 Docker 上线本文已经把 vue-pure-admin 的完整链路走了一遍。想继续深入可以阅读 README.md 了解全部内置能力或从src/router/目录开始动手定制自己的菜单与页面。【免费下载链接】vue-pure-admin全面ESMVue3ViteElement-PlusTypeScript编写的一款后台管理系统兼容移动端项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
