Vue3 + Docker + Nginx 完整部署流程

草木红2026-04-22 9:17

以 vue 项目为例，首先搭建一个vue项目
powershell 复制代码
```
pnpm create vue@latest
```
运行项目后随便在页面中输出点东西，然后打包 vue，打包之后的文件将会在项目根目录下的dist 目录下
powershell 复制代码
```
npm run build
```

在项目根目录下新建一个nginx的配置文件，文件名叫default.conf，文件内容如下

服务器端监听 80 端口;
服务器名为 localhost;

json 复制代码

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
    }


    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

在项目的根目录下创建 Dockerfile 文件，文件内容如下
- 第一行：基于nginx的最新镜像构建
- 第二行：将vue 打包后的 dist 文件夹拷贝到镜像的/usr/share/nginx/html/
- 第三行：将本地的nginx的配置文件替换掉容器的 nginx 的配置文件
json 复制代码
```
FROM nginx:latest
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf
```
构建镜像：在项目目录下打开终端，在终端中执行下面的命令。
- 构建的镜像名为my-vue3-image
- . 表示Dockerfile文件所在的位置，即当前文件夹下
powershell 复制代码
```
docker build -t my-vue3-image .
```
执行构建镜像的命令之后可以在镜像列表中看到对应镜像名称，可以用如下命令查看所有镜像
powershell 复制代码
```
docker images
# 或者，两者选其一即可
# docker image ls
```
在容器中运行项目镜像，在终端中执行如下命令
- -d：后台运行容器
- -p 8080:80：将宿主机（自己的电脑）的8080端口映射到容器的80端口
- --name my-vue3：容器名字叫 my-vue3
- my-vue3-image：用 my-vue3-image 镜像创建容器
powershell 复制代码
```
docker run -d -p 8080:80 --name my-vue3  my-vue3-image
```
- 命令等同于图片
容器跑起来后，在浏览器输入localhost:8080 可以看到相关的页面