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

将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;"]

关键点说明:

  1. try_files配置解决Vue路由history模式404问题
  2. 配置了错误页面处理
  3. 使用COPY指令将配置文件覆盖默认配置
  4. 保持80端口暴露

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

相关推荐
..Move...4 小时前
Docker镜像制作
运维·docker·容器
JIngJaneIL6 小时前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
程序猿阿伟7 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
麦麦大数据8 小时前
D030知识图谱科研文献论文推荐系统vue+django+Neo4j的知识图谱|论文本文相似度推荐|协同过滤
vue.js·爬虫·django·知识图谱·科研·论文文献·相似度推荐
fruge9 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
绝无仅有9 小时前
某教育大厂面试题解析:MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试
没逛够10 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
行思理10 小时前
Docker 应该如何学习 分四个阶段
学习·docker·容器
..Move...11 小时前
Docker应用部署tomcat和nginx
nginx·docker·tomcat
苹果醋312 小时前
JAVA面试汇总(二)多线程(五)
运维·vue.js·spring boot·nginx·课程设计