vue发版html 生成打包到docker镜像进行发版

mqiqe2025-05-30 21:19

将Vue项目打包成Docker镜像部署主要分为以下几个步骤：

1. Vue项目打包‌

执行npm run build生成dist文件夹，包含静态资源文件

注意检查index.html中资源引用路径是否正确（避免绝对路径问题）

2. 编写Dockerfile

dockerfile 复制代码

Copy Code
FROM nginx:latest
COPY dist/ /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3. 构建镜像‌

bash 复制代码

docker build -t vue-app .‌

4. 运行容器‌

bash 复制代码

docker run -d -p 8080:80 --name vue-container vue-app

5. 高级配置（可选）‌

自定义nginx配置：添加nginx.conf文件并COPY到/etc/nginx/nginx.conf
多环境配置：通过.env文件区分开发/测试/生产环境
使用docker-compose管理容器

完整示例项目结构：

dist/ (Vue打包输出)
Dockerfile
nginx.conf (可选自定义配置)

访问方式：http://localhost:8080（端口号根据实际映射调整）

样例

以下是实现Vue项目Docker部署时自定义Nginx配置的完整方案：

1. 首先创建自定义nginx.conf文件（推荐放在项目根目录下）：

bash 复制代码

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

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

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

2. 修改后的Dockerfile配置：

Dockerfile

bash 复制代码

nginx:latest
COPY dist/ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

关键点说明：

try_files配置解决Vue路由history模式404问题

配置了错误页面处理

使用COPY指令将配置文件覆盖默认配置

保持80端口暴露

构建命令不变：docker build -t vue-app . && docker run -p 8080:80 vue-app