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

docker打包vue vite前端项目

打包vue vite 前端项目

1.打包时将测试删除
在这里插入图片描述

2.修改配置在这里插入图片描述
3.打包项目

npm run build

在这里插入图片描述
显示成功(黄的也不知道是啥)
打包好的前端文件放入
在这里插入图片描述

4.配置 default.conf
在这里插入图片描述

upstream wms-app {server 你自己的ip加端口 ;server 192.168.xx.xx:8080 ;
}
server {
listen 80;
server_name localhost; location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
# location /api/ {
#             add_header 'Access-Control-Allow-Origin' '*';
#             add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';
#             add_header 'Access-Control-Allow-Headers' 'Authorization'; #跨域设置
#             proxy_pass http://192.168.xx.xx:8080; 
#         }
location /api/ {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';add_header 'Access-Control-Allow-Headers' 'Authorization'; #跨域设置proxy_pass http://wms-app ; }error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

5.配置dockerfile
在这里插入图片描述

FROM nginxRUN rm /etc/nginx/conf.d/default.confADD default.conf /etc/nginx/conf.d/COPY dist/ /usr/share/nginx/html/

6.进入你的文件夹下面 我的是 /root/206/web

docker build -t web:v1 .
注意后面的 . 点
7.运行
docker run -it -p 3777:80 --name=web web:v1
在这里插入图片描述

8.windows测试

在这里插入图片描述

http://www.lryc.cn/news/150542.html

相关文章:

  • zookeeper 查询注册的 dubbo 服务
  • 【每日一题】57. 插入区间
  • youtubu视频下载和yt-dlp 使用教程
  • ——滑动窗口
  • 【C++进阶】模板进阶
  • Vim如何清空文件
  • 问道管理:什么信号?煤飞色舞钢花溅
  • C# PaddleDetection yolo 印章检测
  • 常用框架分析(7)-Flutter
  • 清空 Docker 容器的日志文件
  • 01-虚拟机安装Windows Server操作系统
  • 应用案例 | 基于三维机器视觉的机器人麻袋拆垛应用解决方案
  • 1018 Public Bike Management 结题记录(dfs剪枝)
  • C++ deque底层原理
  • 打破对ChatGPT的依赖以及如何应对ChatGPT的错误和幻觉
  • 【git】【IDEA】在idea中使用git
  • 【设计模式】装饰者模式
  • open cv快速入门系列---数字图像基础
  • 基础知识回顾:借助 SSL/TLS 和 NGINX 进行 Web 流量加密
  • iPhone 14 Plus与iPhone 14 Pro:你应该买哪一款
  • 操作系统清华同步笔记:定义概述+计算机内存和硬盘布局+启动流程顺序+中断、异常和系统调用
  • uniapp 配置并使用 VueX
  • vue v-on 艾特@
  • 【Ajax】发送跨域的POST请求时,浏览器会先发送一次OPTIONS请求,然后才发送原本的POST请求
  • np.numpy, np.reshape, np.cumsum方法速查
  • 七、Kafka-Kraft 模式
  • jvm开启远程调试功能;idea远程debug
  • 视频汇聚/视频云存储/视频监控管理平台EasyCVR视频平台添加萤火云设备的具体操作步骤
  • vue 加载图片不显示
  • Java for循环每次都通过list.size()和 string.length()获取大小性能