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

基于Windows,Docker用法

1、安装Docker Desktop

 

2、打开Docker Desktop,查找Images来Pull安装
node:latest
nginx:latest

 

3、挂载本地目录

docker run -it --rm -v F:/demo:/app -w /app -p 5173:5173 node:latest bash

# -v:与 /app 相互映射
# -w:直接进入映射文件夹
# -p:映射端口(可以多个 -p),vite默认5173端口

 

4、创建vue项目

npm create vue@latest
# 创建项目名:vue-docker-demo
cd vue-docker-demo
npm install
npm run build  # 必须成功创建dist

 

5、退出docket容器

exit

 

6、创建Dockerfile

# 阶段 1:编译
FROM node:latest AS build-stage
WORKDIR /app
COPY package*.json ./
RUN npm ci --prefer-offline --no-audit
COPY . .
RUN npm run build# 阶段 2:托管
FROM nginx:latest AS production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 可选:拷贝自定义 nginx 配置(解决刷新 404)
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

 

7、创建.dockerignore

node_modules
dist
.git
*.md

 

8、创建nginx.conf(解决 Vue History 模式刷新 404)

events {
    worker_connections 1024;
}
http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;
        # 关键行:History 模式刷新不 404
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

 

9、创建本地镜像

cd F:\demo\vue-docker-demo
docker build -t vue-docker-demo .
docker images vue-docker-demo # 检查是否成功


10、运行容器

docker rm -f vue-app  # 强制删除容器
docker run -d -p 3000:80 --name vue-app vue-docker-demo

 

11、打开浏览器
http://localhost:3000/

http://www.hskmm.com/?act=detail&tid=35907

相关文章:

  • 厨房电子秤方案:厨房秤常规的功能有那些?
  • npx和npm exec有什么区别
  • MySQL 死锁 怎么处理?
  • MyBatis 的 @SelectProvider 是一个强大的注解,用于动态生成 SQL 语句
  • 跨境客服系统如何保障国际数据传输安全?
  • 物联网短信收发速成:10分钟用SMS库上手实战
  • 2025年耳机插座厂家权威推荐榜:DC防水耳机插座,专业防水防尘设计,耐用稳定性能卓越之选
  • 2025年10月18日,工信部人才交流中心PostgreSQL认证考试完成!
  • 2025年CNC加工厂家权威推荐榜:CNC精密加工/加工中心CNC/cnc电脑锣加工/铝板cnc加工/精密CNC加工源头企业综合评测
  • Yolo11分类模型
  • 市面上的开源 AI 智能体平台使用体验
  • 简支梁在荷载作用下的变形计算
  • 2025年真空烧结炉厂家权威推荐榜单:高效节能、智能温控、工业窑炉设备优质供应商精选
  • 基于 tar.gz 的自定义 安装InfluxDB
  • 2025年移动泵车厂家推荐排行榜,防汛泵车,水泵机组,应急排水泵车,柴油机泵车公司精选
  • Oracle 触发器
  • 2025年铁氟龙高温线厂家推荐排行榜,铁氟龙/极细铁氟龙/UL10064铁氟龙/UL1332铁氟龙/UL1867铁氟龙公司推荐
  • Slope Trick
  • 阅读笔记二:高效编程的核心策略
  • OpenAI 发布 GPT-5 Instant:AI 有了 “情感温度计“ - 实践
  • 线性代数 SVD | 几何本质、求解方法与应用 - 教程
  • SG 函数
  • 2025 年铝包木阳光房生产厂家最新推荐榜:口碑至上的实力品牌甄选及选购指南
  • Oracle统计信息相关
  • 2025年栏杆护栏厂家权威推荐榜:不锈钢栏杆、桥梁防撞护栏、河道景观护栏,专业制造与工程应用深度解析
  • Consul 与 Prometheus 集成实战:服务自动发现与监控配置指南(含 ThinkPHP8 示例)
  • 2025年TYPE-C母座厂家权威推荐榜:防水/板上/沉板/立插/卧式/侧贴/贴片式/插件式全系列,5A大电流高速TID认证接口一站式供应
  • 题解:P1196 [NOI2002] 银河英雄传说
  • Oracle下查询数据库SQL ID
  • 进程管理专题(一)