利用docker镜像将vue项目部署到服务器上，并通过域名访问

首先在Vue项目根目录下进行构建，生成用于生产环境的静态文件（常在dist目录下）

npm run build

在Vue项目根目录下创建Dockerfile，这个文件包含了构建Docker镜像的命令

FROM nginx:alpine
# 删除 Nginx 默认的配置文件
RUN rm /etc/nginx/conf.d/default.conf
# 将本地的 Nginx 配置文件复制到镜像中 (下一步会创建这个文件)
COPY nginx.conf /etc/nginx/conf.d/
# 将构建好的 Vue 项目静态文件 (dist 目录下的所有内容) 复制到 Nginx 的 web 根目录
COPY dist/ /usr/share/nginx/html/
# 暴露 80 端口 (Nginx 默认监听的端口)
EXPOSE 80
# 容器启动时运行 Nginx
CMD ["nginx", "-g", "daemon off;"]

创建 Nginx 配置文件 (nginx.conf): 在Vue 项目根目录下，创建一个名为 nginx.conf 的文件。这个文件告诉 Nginx 如何处理请求，特别是对于单页应用（SPA）如何处理路由。

server {
    listen 80;
    server_name localhost; # 你可以根据需要修改为你的域名

    # 设置 web 根目录为我们复制静态文件的位置
    root /usr/share/nginx/html;
    index index.html index.htm;

    # 关键配置：处理 Vue Router 的 history 模式
    # 尝试查找请求的文件 ($uri)，如果找不到，尝试查找目录 ($uri/)，
    # 如果都找不到，则回退到 /index.html，让 Vue Router 处理路由。
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：配置 gzip 压缩以提高性能
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/jpeg image/gif image/png image/svg+xml;
    gzip_vary on;
    gzip_disable "msie6";
}

进行构建Docker镜像

docker build -t my-app

下面我选择阿里云作为我的私人镜像存储仓库，这样服务器只需要拉取这个仓库并运行镜像即可。

首先是进行登录，然后推送镜像。（详细步骤查询阿里云文档）

推送成功后，在服务器终端上拉取镜像，并运行docker容器。

# 格式: docker run -d -p <宿主机端口>:<容器端口> --name <容器名称> <完整镜像名称>
docker run -d -p 9091:80 --name my-vue-container crpi-owt1h58robs00am3.cn-hangzhou.personal.cr.aliyuncs.com/yuuc/docker:latest

现在就可以输入117.72.15.198：9091来访问了（记得更新防火墙规则)

但是可能有人会说，我不想输入端口号来访问，有没有更现代化的方法。

有的兄弟，有的。

我们可以使用1Panel的反向代理来实现。

首先，在域名解析设置处，添加一条A记录，at.yuuc.xyz指向117.72.15.198

然后在1Panel进行反向代理（将at.yuuc.xyz代理到9091端口），目标URL：117.72.15.198：9091

然后申请证书，保证不会弹出不安全连接。

这时候，就可以访问at.yuuc.xyz拉！