使用docker运行vite项目

最新推荐文章于 2025-08-27 20:53:22 发布

原创最新推荐文章于 2025-08-27 20:53:22 发布 · 570 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#docker #容器 #vue #linux

前言

Docker安装 - 笔记
可能会报错的项 - 笔记

1. 安装Node.js

下载：Node.js官网下载LTS版本（Node.js ≥ 18）
验证安装：node -v 和 npm -v
镜像加速（可选）：npm config set registry https://registry.npmmirror.com

#WSL里安装Node.js，实例：
#拉取docker镜像
docker pull node:22-alpine
#创建一个Node.js容器并启动一个Shell会话（交互式/我觉得这是一条没什么用的命令 你可以运行后查看版本）
docker run -it --rm --entrypoint sh node:22-alpine

#或 通过完整命令验证环境
docker run -it --rm node:22-alpine node -v

WSL里安装node.js 通过完整命令验证环境

2. 创建/运行Vite项目

#通过docker 使用node.js
docker run -it --rm -v /宿主机/绝对路径:/容器内路径 -w /容器内路径 node:22-alpine 命令
#复合命令
docker run -it --rm -v /宿主机路径:/app -w /app node:22-alpine sh -c "命令1 && 命令2" 

#创建/运行vite项目
#$(pwd)为路径
docker run -it --rm -v $(pwd):/app -w /app node:22-alpine \  
sh -c "npm create vite@latest my-project -- --template vue \  
&& cd my-project \  
&& npm install \  
&& npm run dev"  

#示例（copy）
docker run -it --rm -v /mnt/e/YumeWorkFiles/Aaaa-t/Abbb-t/my-project:/app -w /app -p 8081:8081 node:22-alpine npm run dev

#Docker容器默认使用桥接网络，172.17.0.2是容器内部IP，主机无法直接访问。
#需要确保端口映射正确，例如启动容器时应添加-p 8082:8081参数
#前者是需要在windows运行的端口，后者是docker运行的端口
#因为我在vite项目里配置的是8081端口，所以用8081为例：
#(你想用什么端口就写什么端口，不跟别的端口冲突就行，我试了，前后可以一样，例子用的不一样是方便区分理解)

#vite项目配置（好像不配也行，端口冲突的时候可以参考⬇）