如何在Docker上配置nginx for Vue-router

# 使用官方的Node镜像作为基础镜像
FROM node:14-alpine

# 设置工作目录
WORKDIR /app

# 复制项目文件到工作目录
COPY . .

# 安装依赖
RUN npm install

# 构建项目
RUN npm run build

# 使用nginx作为Web服务器
FROM nginx:1.21-alpine

# 将Vue项目的构建结果复制到nginx的默认静态文件目录
COPY --from=0 /app/dist /usr/share/nginx/html

# 复制自定义的nginx配置文件到容器中
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露容器的80端口
EXPOSE 80

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

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

docker build -t my-vue-app .

docker run -d -p 8080:80 my-vue-app