搭建开发环境

Docker环境

生成Docker

FROM node:24-bookworm-slim
 
WORKDIR /app
 
EXPOSE 5173

示例固定 Node.js 24 主版本，避免 FROM node 或 node:latest 随时间变化导致构建结果不可复现。npm 默认源已经使用 HTTPS；确需镜像源时也应使用受信任的 HTTPS 地址。

依赖安装应优先复制 package.json 和 lockfile 后执行 npm ci，以利用镜像缓存并保证版本一致；开发时挂载整个源码目录会覆盖镜像内同路径文件，需要单独处理 node_modules。

Makefile

VERSION ?= 24-bookworm
IMAGE ?= 192.0.2.4.90/library/vue-node
 
.PHONY: all run stop build docker_build docker_push docker_start docker_stop
 
all: docker_stop docker_start
run: docker_start
stop: docker_stop
build: docker_build docker_push
 
docker_build:
	@echo "开始构建Vue开发镜像..."
	@docker build --pull -t $(IMAGE):$(VERSION) .
 
docker_push:
	@docker push $(IMAGE):$(VERSION)
 
docker_start:
	@echo "start Vue development server"
	@docker run --rm -it \
		-v "$(CURDIR)/src:/app" \
		-v vue-node-modules:/app/node_modules \
		-w /app -p 5173:5173 \
		--name vue-dev-app $(IMAGE):$(VERSION) \
		sh -lc 'npm ci && npm run dev -- --host 0.0.0.0'
 
docker_stop:
	@echo "stop Vue development server"
	@docker stop vue-dev-app 2>/dev/null || true

使用 make build 构建并推送镜像，使用 make run 启动开发服务器。docker run --rm 会在退出后自动删除容器，依赖保存在命名卷中。

Windows 环境搭建

安装 NodeJs

Node.js — Run JavaScript Everywhere (nodejs.org) 从上面的链接下载 LTS 安装包后直接安装，执行 node --version 和 npm --version 验证。不要强制配置 HTTP npm 源；网络受限时使用组织批准的 HTTPS 镜像或代理。

使用 npm run dev -- --host 192.0.2.19 启动 Vue 服务器 如果带—host 0.0.0.0 就是启动所有 IP 的绑定，而如果指定了具体 IP 就只监听指定 IP 的端口

Ubuntu 22.04 搭建环境

使用 Ubuntu 软件源

下面的命令会安装 Ubuntu 仓库提供的 Node.js，版本可能落后于 Node.js 当前 LTS，安装后必须检查是否满足 Vite 和项目 package.json 的 engines 要求：

sudo apt update
sudo apt install nodejs
node -v

下面的命令安装 npm

sudo apt install npm

如何直接安装二进制版本

首先去站点 https://nodejs.org/en/download/prebuilt-binaries 下载预编译的二进制版本 将下载后的文件放到一个目录下面去，然后使用 tar xv 下载的文件进行解压缩 下载时同时校验 Node.js 官方提供的 SHASUMS256.txt。解压后可把 bin 目录加入 ~/.profile，例如 export PATH="$HOME/soft/node-v24.x-linux-x64/bin:$PATH"，再执行 source ~/.profile。实际目录名以下载版本为准。

部署各种Admin框架

部署Admin-One

https://github.com/justboil/admin-one-vue-tailwind 下载 Admin One 代码并放到 src 目录后，先确认仓库要求的 Node.js 版本和 lockfile，再执行上面的 make run。容器会运行 npm ci 并启动 Vite。 如需从其他机器访问，Vite 必须监听 0.0.0.0，同时应只在可信内网或受控防火墙中开放 5173 端口，不要把开发服务器直接暴露到公网。 这个时候直接访问网址就可以看到界面 到此说明开发环境完成

部署Vue-element-plus

https://github.com/element-plus/element-plus-vite-starter 下载上面的element-plus启动模板放到src目录之后重新make build生成镜像文件

直接执行前文的 make run 启动调试环境；如果项目没有 lockfile，应先在受控环境生成并提交 lockfile，再使用 npm ci。 启动之后的界面如下