使用Dockerfile部署vue项目_docker部署 vue项目 dockerfile 文件名-优快云博客

本文链接：https://blog.youkuaiyun.com/solocao/article/details/108479950

本文详细介绍如何使用Docker部署Vue.js项目至甲方电脑，包括Dockerfile的编写、nginx配置、自定义npm命令及构建运行容器的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需要部署到甲方电脑上，使用docker是个不错的选择。
1、创建Dockerfile文件

# 设置基础镜像
FROM nginx:latest
 
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
# 用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY default.conf /etc/nginx/conf.d/default.conf

2、创建镜像中nginx配置文件

新建文件default.conf

# nginx配置
server {
    listen       80;
    server_name  localhost;
 
    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;
 
    location / {
        # root 根目录，默认nginx镜像的html文件夹，可以指定其他
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 如果vue-router使用的是history模式，需要设置这个 
        try_files $uri $uri/ /index.html;
    }
 
    #error_page  404              /404.html;
 
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

3、个人喜欢在package自定义命令：

  "scripts": {
    "dev": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "docker-build": "docker build -t bim-web ."
  },

4、构建镜像使用命令

npm run docker-build

5、实例化容器

docker run -p 3000:80 -d --name bim-web bim-web