目录结构

demo-vue
    dist
    nginx
        default.conf
    Dockerfile
    start.sh

端口说明

80： nginx端口

8888： 宿主机服务器项目端口

9003：容器内项目端口

7803：代理的后端api端口

1. npm build 打包vue项目生成dist目录文件

2. 编写Dockerfile文件

FROM nginx:1.20

COPY dist /usr/share/nginx/html/dist

COPY nginx/default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

3. 编写启动脚本

#! /bin/bash

echo "demo-vue..."
sleep 3
docker stop demo-vue

sleep 2
docker rm demo-vue

docker rmi demo-vue
echo ""

echo "demo-vue packing..."
sleep 3
docker build -t demo-vue .
echo ""

echo "demo-vue running..."
sleep 3

docker run \
  -p 8888:9003 \
  --name demo-vue \
  -d demo-vue

4. 编写default.conf文件

server {
    listen       9003;
    server_name  192.168.0.22;  # 服务器ip

    #charset koi8-r;

    location / {
        root   /usr/share/nginx/html/dist;
        try_files $uri $uri/ @router;  # 路由重写规则
        index  index.html index.htm;
    }

    location @router {
        rewrite ^.*$ /index.html last;  # 路由重写规则
    }
    location /api/ {
        proxy_pass http://192.168.0.24:7830/api/;  # 代理转发 
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    location = /50x.html {
        root   /usr/share/nginx/html/dist;
    }
} 

5. 部署

服务器上创建目录demo-vue

将dist、nginx、Dockerfile、start.sh 上传到demo-vue目录下

执行
./start.sh

6. 启动访问

192.168.0.22:8888

效果: