一个欲儿的博客

一个欲儿的博客

Docker 部署Vue项目利用nginx
2025-04-11

1. 打包项目

切换到vue的项目工作路径后打包项目

npm run build

如果直接运行上面命令报错,请先运行

npm install

打包以后会生成一个文件夹dist,这里面就相当于vue项目的可执行文件

image.png


2. 创建Dockerfile

# 使用官方 Nginx 镜像
FROM nginx:latest

# 将 Vue 构建的静态文件复制到 Nginx 的默认静态文件目录
COPY ./dist /usr/share/nginx/html

# 暴露 Nginx 默认端口 80
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

3. 创建镜像文件

docker build -t myvue:0.8 .

4. 启动项目

docker run -p 8090:80 myvue:0.8


发表评论: