当前位置: 首页 > news >正文

Dockerfile项目实战-单阶段构建Vue2项目

单阶段构建镜像-Vue2项目

1 项目层级目录

以下是项目的基本目录结构:
在这里插入图片描述

2 Node版本

博主的Windows电脑安装了v14.18.3的node.js版本,所以直接使用本机电脑生成项目,然后拷到了 Centos 7 里面

# 查看本机node版本
node -v

在这里插入图片描述

3 创建Vue2项目

# 全局安装 Vue CLI 工具
# 
# 参数说明:
# -g:表示全局安装,这样 Vue CLI 可以在系统任何地方使用
# @vue/cli:Vue CLI 的包名,这是 Vue.js 官方提供的项目脚手架工具
# 
# 作用:
# Vue CLI 是一个命令行工具,用于快速创建和管理 Vue.js 项目
# 安装完成后,可以通过 `vue` 命令来创建项目、添加插件等
npm install -g @vue/cli

在这里插入图片描述

# 使用 Vue CLI 创建一个新的 Vue.js 项目
# 
# 参数说明:
# my-vue-project:项目名称,将创建一个名为 my-vue-project 的目录
# 
# 作用:
# 这条命令会启动 Vue CLI 的交互式流程,帮助你创建一个新的 Vue 项目
# 在交互过程中,你可以选择预设配置或手动选择需要的功能(如 Vue Router、Vuex 等)
# 
# 注意:
# 如果你不想进入交互模式,可以直接运行:
# vue create -d my-vue-project
# 这会使用默认配置快速创建项目
vue create my-vue-project

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4 本地启用测试

# 进入本地项目目录
cd D:\MySelfStudy\Vue\my-vue-project
# 构建vue项目
npm run build
# 启动vue项目
npm run serve
# 浏览器测试
http://localhost:8080/

在这里插入图片描述

5 将项目copy的Centos7里面

# 创建项目文件夹,并将项目拷进去
mkdir my-vue-project

在这里插入图片描述

6 创建Dockerfile文件

# 创建Dockerfile文件
vim Dockerfile

Dockerfile文件内容

# 使用官方 Node.js 镜像作为基础镜像
FROM node:14.18.3-alpine# 设置工作目录
WORKDIR /app# 复制 package.json 和 package-lock.json(或 yarn.lock)
COPY package*.json ./# 安装依赖
RUN npm install# 复制项目源代码
COPY . .# 构建 Vue 项目
RUN npm run build# 安装 serve 用于静态文件服务
RUN npm install -g serve# 暴露端口
EXPOSE 8080# 启动应用
CMD ["serve", "-s", "dist", "-p", "8080"]

在这里插入图片描述

7 构建镜像

# 构建镜像
docker build -t my-vue-project:1.0 .

在这里插入图片描述

8 运行镜像

# 构建镜像
docker run -d -p 8080:8080 my-vue-project:1.0

在这里插入图片描述

9 浏览器测试

# 浏览器测试
http://localhost:8080/

在这里插入图片描述

相关文章:

Dockerfile项目实战-单阶段构建Vue2项目

单阶段构建镜像-Vue2项目 1 项目层级目录 以下是项目的基本目录结构: 2 Node版本 博主的Windows电脑安装了v14.18.3的node.js版本,所以直接使用本机电脑生成项目,然后拷到了 Centos 7 里面 # 查看本机node版本 node -v3 创建Vue2项目 …...

大数据驱动的供应链透明化:从数据孤岛到智能协同

大数据驱动的供应链透明化:从数据孤岛到智能协同 在全球化供应链环境下,透明化不仅是一种企业责任,更是提高效率、降低成本和增强供应链韧性的关键举措。然而,传统供应链体系因数据孤岛、信息滞后、信任缺失等问题,常常导致生产过剩、库存积压、资源浪费,甚至供应链断裂…...

第四篇:[特殊字符] 深入理解MyBatis[特殊字符] 掌握MyBatis Generator ——入门与实战

引言 什么是 MyBatis Generator? MyBatis Generator (MBG) 是一个代码生成工具,专为 MyBatis 框架设计。它可以根据数据库表结构自动生成 Java 实体类、Mapper 接口、Mapper XML 文件以及 Example 类。通过使用 MBG,开发者可以显著减少编写…...

LeetCode算法题(Go语言实现)_48

题目 在给定的 m x n 网格 grid 中,每个单元格可以有以下三个值之一: 值 0 代表空单元格; 值 1 代表新鲜橘子; 值 2 代表腐烂的橘子。 每分钟,腐烂的橘子 周围 4 个方向上相邻 的新鲜橘子都会腐烂。 返回 直到单元格中…...

ESP-ADF外设子系统深度解析:esp_peripherals组件架构与核心设计(核心API详解之单个外设管理)

目录 单个外设管理APIesp_periph_createesp_periph_set_functionesp_periph_startesp_periph_stopesp_periph_set_dataesp_periph_get_dataesp_periph_get_stateesp_periph_get_idesp_periph_set_idesp_periph_initesp_periph_runesp_periph_destroy 单个外设管理API esp_peri…...

基于vue2+ElementUI的el-tree封装一个带搜索的树形组件

需求 实现一个如图带搜索框的下拉树形组件。 解决方案 利用el-inputel-tree实现自定义带搜索的下拉树形组件。 具体实现步骤 1、创建TreeSelect组件 <template><div class"tree-select-wrapper" v-clickoutside"handleClose"><el-inpu…...

G2学习打卡

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 DCGAN实践 import torch, random, random, os import torch.nn as nn import torch.nn.parallel import torch.optim as optim import torch.utils.data im…...

【广州华锐互动】汽车生产引入数字孪生系统,优化生产流程,提升汽车产品质量

数字孪生系统的应用为企业带来了生产流程的革命性变革。以汽车制造企业为例&#xff0c;该企业在生产过程中引入数字孪生系统&#xff0c;实现了生产流程的全面优化和产品质量的显著提升 。​ 在生产流程优化方面&#xff0c;数字孪生系统对汽车生产线进行了全方位的模拟和实时…...

从Gradio App创建Discord Bot/Slack Bot/Website Widget(2)——从Gradio App创建Slack Bot

从Gradio App创建Discord Bot/Slack Bot/Website Widget&#xff08;2&#xff09;——从Gradio App创建Slack Bot 本篇摘要18. 从Gradio App创建Discord Bot/Slack Bot/Website Widget18.2 从Gradio App创建Slack Bot18.2.1 运作原理及前置条件1. 运作原理2. 前置条件 18.2.2 …...

基于STM32G474的SPI获取MT6816编码器绝对角度配置指南

前言&#xff1a;最近上手使用了一款编码器芯片&#xff0c;也是先艰难阅读了一下全英文版本的编码器的规格手册&#xff0c;然后通过SPI读取了一下绝对值角度。虽然发现使用起来还是挺简单的&#xff0c;但使用后还是会产生一个对其原理层面的好奇&#xff0c;比如磁编码器内部…...

深入学习ReentrantLock

ReentrantLock 0. 前言&#xff1a;为什么需要 ReentrantLock&#xff1f;1. 基础概念与核心特性1.1 什么是 ReentrantLock&#xff1f;1.2 ReentrantLock vs. synchronized1.3 核心特性详解1.3.1 可重入性 (Reentrancy)1.3.2 公平性选择 (Fairness Choice)1.3.3 可中断获取锁 …...

Spring Boot 集成金蝶 API 演示

✨ Spring Boot 集成金蝶 API 演示&#xff1a;登录 / 注销 Cookie 保存 本文将通过 Spring Boot 完整实现一套金蝶接口集成模型&#xff0c;包括&#xff1a; ✅ 普通登录✅ AppSecret 登录✅ 注销✅ Cookie 保存与复用 &#x1f4c5; 项目结构 src/ ├── controller/ │…...

适用于 HAL 的 AIDL

目录 设计初衷 注意 编写AIDLHAL接口 查找AIDLHAL接口 扩展接口 将现有HAL从HIDL转换为AIDL AIDL与HIDL之间的主要差异 针对HAL的供应商测试套件(VTS)测试 Android 11 中引入了在 Android 中使用 AIDL 实现 HAL 的功能, 从而可以在不使用 HIDL 的情况下实现 Android 的部分…...

49、Spring Boot 详细讲义(六)(SpringBoot2.x整合Mybatis实现CURD操作和分页查询详细项目文档)

项目文档:银行借据信息CURD操作和分页查询 一、项目概述 1. 项目简介 本项目旨在使用Spring Boot框架整合MyBatis连接Mysql数据库实现借据信息的增加、删除、修改和查询功能,同时支持分页查询,并提供对应的Restful风格的接口。 2.环境准备 2.1.工具和软件准备 JDK(建议…...

C# 运行web项目

1、web项目直接点击顶部运行...

GPU服务器声音很响可以怎么处理

当GPU服务器运行时噪音过大&#xff0c;通常是由于高负载下散热风扇高速运转所致。以下是分步骤的解决方案&#xff0c;帮助您有效降低噪音并保持设备稳定运行&#xff1a; 一、排查噪音来源 定位声源 • 使用 声级计 或手机分贝检测APP&#xff0c;确定最大噪音位置&#xff0…...

Java如何选择ojdbc驱动

如何选择ojdbc驱动&#xff1f; 取决于短板。 如果JDK版本高&#xff0c;数据库版本低&#xff0c;根据Oracle数据库版本选择。如果JDK版本低&#xff0c;数据库版本高&#xff0c;根据Java版本选择。 Oracle官网OJDBC驱动和受支持的JDK版本 23ai 21c 19c 驱动类型选择 oj…...

【微思就业推荐 】T岗位-北京,福州,厦门等地

到微思学习&#xff0c;免费推荐就业&#xff01;学员内推&#xff01; 原创 厦门微思网络 2025年04月 有哪些大公司在招OCP认证人才&#xff1f; 有哪些大公司在招聘拥有HCIE认证的人才 ① 委托单位&#xff1a;润欣商业管理(厦门)有限公司 央企-华润资产的子公司 岗位&am…...

Linux 命令全解析:从零开始掌握 Linux 命令行

Linux 作为一款强大的开源操作系统&#xff0c;广泛应用于服务器、嵌入式系统以及超级计算机领域。掌握 Linux 命令行技能&#xff0c;是每一位开发者和系统管理员的必备能力。本文将从基础开始&#xff0c;为你详细介绍常用的 Linux 命令&#xff0c;以及它们的使用场景和示例…...

2025年4月份生活有感

今天在5000B培训的下午&#xff0c;一起入所来的小伙伴&#xff0c;有个申请了深圳大学的博士&#xff0c;已录取。哎&#xff0c;想起了当年申博时候信心和决心不足&#xff0c;导致后面匆匆的拿了offer去工作。看到同事的选择还是非常羡慕&#xff0c;想到自己5月份的婚礼&am…...

鸿蒙系统开发状态更新字段区别对比

在鸿蒙系统开发中&#xff0c;状态管理是构建响应式UI的核心机制&#xff0c;主要通过装饰器&#xff08;Decorators&#xff09;实现字段的状态观测与更新。根据鸿蒙的版本&#xff08;V1稳定版和V2试用版&#xff09;&#xff0c;支持的装饰器及其特性有所不同。以下是主要状…...

CEPH OSD_SLOW_PING_TIME_FRONT/BACK 警告处理

ceph config set mgr mon_warn_on_slow_ping_time 2000说明&#xff1a;mon_warn_on_slow_ping_time 该值默认为0&#xff0c;那么只要 osd 心跳超过 mon_warn_on_slow_ping_ratio of osd_heartbeat_grace. 也就是超过 mon_warn_on_slow_ping_ratio和mon_warn_on_slow_ping_rat…...

HTML应用指南:利用POST请求获取全国小菜园门店位置信息

小菜园作为一家以徽菜为主的快餐品牌&#xff0c;自2013年成立以来&#xff0c;凭借其独特的烹饪理念和精致的东方口味菜品&#xff0c;在中国市场上迅速崛起。该品牌强调少油少盐、减少调味品使用&#xff0c;旨在传承并发扬徽州风味的独特魅力。这种健康且不失美味的烹饪方式…...

Python在去中心化物联网中的应用:数据安全、智能合约与边缘计算的融合

Python在去中心化物联网中的应用:数据安全、智能合约与边缘计算的融合 在万物互联的时代,传统物联网(IoT)架构依赖于集中式服务器来管理数据、设备互联与身份认证。然而,随着设备数量激增,中心化架构的可扩展性、安全性和隐私问题逐渐暴露。去中心化物联网(DeIoT)通过…...

CEPH配置优化建议

一、硬件配置优化 磁盘选择&#xff1a; SSD 与 HDD 搭配&#xff1a;使用 SSD 作为 OSD 日志盘&#xff08;Journal&#xff09;或元数据存储&#xff0c;HDD 作为数据盘。推荐 SSD 与 HDD 的比例为 1:3~5&#xff0c;具体根据业务负载调整。 RAID 禁用&#xff1a;避免使用硬…...

深度学习入门:神经网络的学习

目录 1 从数据中学习1.1 数据驱动1.2 训练数据和测试数据 2损失函数2.1 均方误差2.2 交叉熵误差2.3 mini-batch学习2.4 mini-batch版交叉熵误差的实现2.5 为何要设定损失函数 3 数值微分3.1 数值微分3.3 偏导数 4 梯度4.1 梯度法4.2 神经网络的梯度 5 学习算法的实现5.1 2层神经…...

机器学习_决策树

决策树的特点 可以处理非线性的问题可解释强&#xff0c;没有θ模型简单&#xff0c;模型预测效率高 if else不容易显示的使用函数表达&#xff0c;不可微 决策树的生成和预测 生成&#xff1a;通过大量数据生成一颗非常好的树&#xff0c;用这棵树来预测新来的数据。 预测&…...

深入理解UML动态图:系统行为建模全景指南

目录 前言1. 动态图概述2. 用例图&#xff08;Use Case Diagram&#xff09;2.1 定义与作用2.2 应用价值2.3 实践建议 3. 顺序图&#xff08;Sequence Diagram&#xff09;3.1 定义与特征3.2 应用优势3.3 建模建议 4. 活动图&#xff08;Activity Diagram&#xff09;4.1 定义与…...

Linux驱动开发进阶(九)- SPI子系统BSP驱动

文章目录 1、前言2、SPI总线注册3、SPI设备注册4、SPI驱动注册5、SPI BSP驱动 1、前言 学习参考书籍以及本文涉及的示例程序&#xff1a;李山文的《Linux驱动开发进阶》本文属于个人学习后的总结&#xff0c;不太具备教学功能。 2、SPI总线注册 驱动源码文件&#xff1a;dri…...

wabpack学习记录

wabpack学习记录 前言 项目写了不少 对webpack了解甚少 只记住一些 必要的概念以及指令 所以像深究一下具体是什么 可以做什么 如何做等 package.json 文件详解 name: 项目的名称。 version: 项目的版本号。 description: 项目的描述。 author: 项目的作者或维护者信息。 l…...

计算机视觉——基于 Yolov8 目标检测与 OpenCV 光流实现目标追踪

1. 概述 目标检测&#xff08;Object Detection&#xff09;和目标追踪&#xff08;Object Tracking&#xff09;是计算机视觉中的两个关键技术&#xff0c;它们在多种实际应用场景中发挥着重要作用。 目标检测指的是在静态图像或视频帧中识别出特定类别的目标对象&#xff0…...

React 更新 state 中的数组

更新 state 中的数组 数组是另外一种可以存储在 state 中的 JavaScript 对象&#xff0c;它虽然是可变的&#xff0c;但是却应该被视为不可变。同对象一样&#xff0c;当你想要更新存储于 state 中的数组时&#xff0c;你需要创建一个新的数组&#xff08;或者创建一份已有数组…...

[250415] OpenAI 推出 GPT-4.1 系列,支持 1M token

目录 OpenAI 推出 GPT-4.1 系列 OpenAI 推出 GPT-4.1 系列 OpenAI 宣布&#xff0c;新一代 GPT-4.1 模型系列正式发布&#xff0c;包括 GPT-4.1, GPT-4.1 mini 和 GPT-4.1 nano 三款模型&#xff0c;该系列模型在各项性能指标上全面超越 GPT-4o 和 GPT-4o mini&#xff0c;尤其…...

分布式锁+秒杀异步优化

文章目录 问题思路setnx实现锁误删问题和解决方案Redis Lua脚本问题引出解决方案 setnx实现的问题Redission快速入门redission可重入锁原理 秒杀优化(异步优化)异步秒杀思路秒杀资格判断Redis消息队列 问题 比如我们两个机器都部署了我们项目&#xff0c;这里nginx使用轮询的方…...

数据服务化 VS 数据中台:战略演进中的价值重构

在企业数据战略的演进历程中&#xff0c;数据中台曾被视为解决数据孤岛的 “万能钥匙”&#xff0c;而数据服务化的兴起则标志着企业从 “数据资源囤积” 向 “数据价值释放” 的深刻转型。两者的核心差异不仅在于技术架构&#xff0c;更在于对数据资产的定位与使用理念的根本分…...

PL/SQL登录慢,程序连接Oracle 提示无法连接或无监听

PL/SQL登录慢&#xff0c;程序连接Oracle 提示无法连接或无监听 错误提示&#xff1a;ORA-12541: TNS: 无监听程序 的解决办法&#xff0c; 现象&#xff1a;PL/SQL登录慢&#xff0c;程序连接Oracle 提示无法连接或无监听 监听已经正常开起&#xff0c;但还是PL/SQL登录慢或…...

【JAVAFX】自定义FXML 文件存放的位置以及使用

情况 1&#xff1a;FXML 文件与调用类在同一个包中&#xff08;推荐&#xff09; 假设类 MainApp 的包是 com.example&#xff0c;且 FXML 文件放在 resources/com/example 下&#xff1a; 项目根目录 ├── src │ └── sample │ └── Main.java ├── src/s…...

DDoS(分布式拒绝服务)攻击

DDoS(分布式拒绝服务)攻击 这是一份全面系统的 DDoS&#xff08;分布式拒绝服务攻击&#xff09;知识总结&#xff0c;适合用于学习、报告、讲稿或者面试准备。内容涵盖定义、原理、危害、利用、工具、防护策略等。 一、什么是DDoS DDoS&#xff08;Distributed Denial of Se…...

scikit-learn初探

KFold k交叉验证&#xff0c;k-1个作为训练集&#xff0c;剩下的作为测试集 split split(X, yNone, groupsNone)X&#xff1a; (n_samples, n_features)的矩阵&#xff0c;行数为n_samples&#xff0c;列数为n_features y&#xff1a;(n_samples,)为列向量&#xff0c;表示监…...

深入解析 sklearn 中的多种特征编码方式:功能、适用场景与选择建议

标题&#xff1a;深入解析 sklearn 中的多种特征编码方式&#xff1a;功能、适用场景与选择建议 摘要&#xff1a; 在机器学习中&#xff0c;特征编码是数据预处理的重要环节&#xff0c;直接影响模型的性能和效果。本文详细介绍了 sklearn 及其生态中&#xff08;含第三方库…...

windows10 wsl2 安装ubuntu和docker

见 弃用Docker Desktop&#xff1a;在WSL2中玩转Docker之Docker Engine 部署与WSL入门-阿里云开发者社区 如果启动docker时报下面这个错&#xff0c; 那是因为systemctl没有启用 sudo systemctl start docker System has not been booted with systemd as init system (PID 1)…...

一文读懂WPF系列之依赖属性与附加属性

依赖属性与附加属性 依赖属性对比C#属性WPF依赖属性&#xff08;Dependency Properties&#xff09;优先级计算与值决策​​回调与验证机制​​WPF 自带的依赖属性自定义依赖属性 附加属性本质与定义​​与依赖属性的区别​​附加属性的典型应用场景自定义附加属性注意事项 属性…...

1×1卷积与GoogleNet

11卷积 卷积核的尺寸等于1的卷积核 11卷积有什么用 1. 通道混合与特征转换 背景&#xff1a;在卷积神经网络中&#xff0c;输入数据通常有多个通道&#xff08;例如RGB图像有3个通道&#xff0c;经过卷积层后通道数可能会增加&#xff09;。不同通道的特征图可能包含了不同的…...

Handsontable 表格组件的使用

文章目录 1. 安装 Handsontable2. 创建一个基本表格3. 主要配置3.1、 data 数据3.2、 columns 指定列配置 4. Handsontable 高级功能4.1、 添加排序4.2、 过滤数据4.3、 选中行高亮4.4、 只读单元格4.5、 校验数据 5. Handsontable 与 Vue结合6. 总结 Handsontable 是一个强大的…...

消息中间件面试题

前言 本章内容来自B站黑马程序员java大厂面试题与小林coding 如有侵权立即删除 博主学习笔记&#xff0c;如果有不对的地方&#xff0c;海涵。 如果这篇文章对你有帮助&#xff0c;可以点点关注&#xff0c;点点赞&#xff0c;谢谢你&#xff01; 1.通用篇 1.1 什么是消息…...

数据结构与算法--1.判断数组中元素是否有重复

在C语言中&#xff0c;我们可以使用类似的方法来实现判断数组中是否有重复值的功能。由于C语言没有内置的哈希集合&#xff08;如Python的set或C的unordered_set&#xff09;&#xff0c;我们需要自己实现一个简单的哈希表或使用其他方法。 方法一&#xff1a;暴力法&#xff…...

硬件工程师面试常见问题(1)

第一问&#xff1a;单片机上电后没有运转&#xff0c;首先要检查什么&#xff1f; &#xff08;1&#xff09;单片机供电是否正常& 电路焊接检查 用万用表测量对应引脚的供电电压&#xff0c;检查对不对。 &#xff08;2&#xff09;单片机复位是否释放 用万用表测量复位引…...

测试100问:web测试和APP测试的区别

哈喽&#xff0c;大家好&#xff0c;我是十二&#xff0c;那今天要为大家分享的是高频面试题&#xff1a;web测试和 App测试的区别。 从功能测试方面来讲&#xff0c;web测试和 App测试在测试的流程以及测试用例的设计上是没有区别的&#xff0c;那主要的区别包含以下三个方面&…...

Leetcode 3518. Smallest Palindromic Rearrangement II

Leetcode 3518. Smallest Palindromic Rearrangement II 1. 解题思路2. 代码实现 题目链接&#xff1a;Leetcode 3518. Smallest Palindromic Rearrangement II 1. 解题思路 这一题是题目Leetcode 3517. Smallest Palindromic Rearrangement I的升级版本&#xff0c;其主要的…...

Golang|订单相关

文章目录 秒杀写库策略确保缓存的订单数据不丢失 秒杀写库策略 在我们的抽奖函数中&#xff0c;抽中奖品、减库存成功返回给前端后就应该生成订单写入数据库 但是这里有问题&#xff0c;我们的抽奖函数是支持高并发的&#xff0c;并发量大的情况下mysql无法支持这么大并发量的写…...