docker创建vue镜像

devtools/2024/11/27 22:00:40/

1.确保你已经安装了 Node.js 和 Vue CLI。
2.创建一个 Vue.js 项目(如果你还没有一个)
vue create my-vue-app
3.进入目录
cd my-vue-app
4.构建vue.js
npm run build
5.创建一个 Dockerfile 来构建 Vue 应用的 Docker 镜像:
# 基于 Node 官方镜像
FROM node:lts-alpine
 
# 设置工作目录
WORKDIR /app
 
# 复制 package.json 和 package-lock.json (如果有)
COPY package*.json ./
 
# 安装项目依赖
RUN npm install
 
# 复制项目文件和目录到工作目录
COPY . .
 
# 构建 Vue 应用
RUN npm run build
 
# 使用 Nginx 镜像作为基础来提供 web 服务器
FROM nginx:stable-alpine
 
# 从 Vue 应用镜像中复制构建好的文件到 Nginx 服务器的 html 目录中
COPY --from=0 /app/dist /usr/share/nginx/html
 
# 暴露 80 端口
EXPOSE 80
 
# 启动 Nginx,并且 Nginx 将持续运行
CMD ["nginx", "-g", "daemon off;"]


6.使用以下命令创建docker镜像
docker build -t my-vue-app . 

7.运行vue.js应用的docker容器
docker run -d -p 8080:80 --name vue-app my-vue-app


http://www.ppmy.cn/devtools/137494.html

相关文章

多商户系统推动旅游业数字化升级与创新,定制化旅游促进市场多元化发展

国内旅游市场一直保持着强劲的发展势头。随着国内居民收入水平的提高、消费观念的转变以及交通条件的极大改善,国内旅游人数持续攀升。无论是传统的热门旅游城市,如北京、上海、杭州等,还是新兴的旅游目的地,如成都、重庆、西安等…

Vue2+el-table实现表格行上下滚动,表格单元格内容溢出左右滚动 TextScroll、TableWrapper

Vue2el-table实现表格行上下滚动&#xff0c;表格单元格内容溢出左右滚动 TextScroll、TableWrapper TextScroll 文本左右滚动容器组件 <template><div ref"wrapper" class"scroll-wrapper" mouseenter"mouseenter" mouseleave"…

【Mybatis】动态SQL详解

文章目录 动态SQLifsetifwhereiftrimforeachchoosesql 动态SQL <if> 用于条件判断&#xff0c;决定是否包含某个SQL片段。 ifset <set> 用于动态生成 SET 子句&#xff0c;自动处理多余的逗号。 <!-- 更新用户信息 --> <update id"edit" &g…

自定义 RouterLink 组件 v-slot custom

高级自定义&#xff1a;通过 v-slot 使用插槽 API 如果你需要更复杂的自定义逻辑或更加灵活的渲染&#xff0c;可以结合 v-slot 来实现&#xff1a; <template><router-link :to"to" custom v-slot"{ navigate }"><div click"navigat…

【git】取消一个已提交的文件或路径的追踪

在 Git 中&#xff0c;如果想取消对一个已提交的文件或路径的追踪&#xff0c;有几种方法可以实现这一点&#xff0c;具体取决于实际场景。以下是几种常见的方法&#xff1a; 1. 从索引中移除文件&#xff08;暂存区&#xff09; 如果只是希望取消对某个文件的追踪&#xff0…

极狐GitLab 17.6 正式发布几十项与 DevSecOps 相关的功能【一】

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料&#xff1a; 极狐GitLab 官网极狐…

VirtIO实现原理之数据结构与数据传输演示(2)

接前一篇文章:VirtIO实现原理之数据结构与数据传输演示(1) 本文内容参考: VirtIO实现原理——vring数据结构-CSDN博客 VirtIO实现原理——数据传输演示-CSDN博客 特此致谢! 一、数据结构总览 2. 相关数据结构 上一回读了《Virtual I/O Device (VIRTIO) Version 1.3》…

Cesium教程03_加载b3dm高度

使用 Vue3 和 Cesium 构建三维地球场景并实现高度调整功能 引言 在现代 Web GIS&#xff08;地理信息系统&#xff09;开发中&#xff0c;Cesium 是一款功能强大的三维地球可视化工具。本文展示了如何使用 Vue3 与 Cesium 集成&#xff0c;实现一个支持调整高度功能的三维地球…