单阶段构建镜像-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/