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.mzph.cn/news/63991.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎样将几个pdf合并?

在日常工作中,我们经常需要处理大量的PDF文件。有时候,我们需要将多个PDF文件合并成一个文件,以便于快速传输或方便查阅。虽然PDF文件本身不能进行编辑,但是借助专业的PDF编辑软件,我们可以轻松地实现将多个PDF文件合并…

动漫推荐。

声明: 1.观看来源:腾讯,bilibili,爱奇艺,优酷(私信博主可获取其他观看途径)。 2.以下动漫热度、时间不分先后,并且都是博主观看完的动漫,黄色标注表示热度较高动漫&…

C++Qt QSS要注意的坑

qss源自css,相当于css的一个子集,主要支持的是css2标准,很多网上的css3的标准的写法在qss这里是不生效的,所以不要大惊小怪。 qss也不是完全支持所有的css2,比如text-align官方文档就有说明,只支持 QPushB…

推荐两款开源的绘制流程图软件

一句话导读 目前流程图绘制软件非常多,包括本机安装的、web端的都有,如Visio、Graphviz、processOn等等。但是几乎都是收费的。本文给大家介绍两款优秀的开源免费的流程图绘制软件。 目录 一句话导读 一、draw.io 二、Meta2d.js ​1.为什么使用 2.…

4、DVWA——文件包含

文章目录 一、文件包含概述二、low2.1 源码分析2.2 通关分析 三、medium3.1 源码分析3.2 通关思路 四、high4.1 源码分析4.2 通关思路 五、impossible 一、文件包含概述 文件包含是指当服务器开启allow_url_include选项时,就可以通过php的某些特性函数(i…

GO|经典错误之回车与\n

学习go的输入输出语句,于是在笔记本上写了这么一段代码: func main() {reader : bufio.NewReader(os.Stdin)input, _ : reader.ReadString(\n)input input[:len(input)-1]i, _: strconv.Atoi(input)fmt.Println(i) } 运行,输入99&#xff…

Java“牵手”京东商品详情数据,京东API接口申请指南

京东平台商品详情接口是开放平台提供的一种API接口,通过调用API接口,开发者可以获取京东商品的标题、价格、库存、月销量、总销量、库存、详情描述、图片等详细信息 。 获取商品详情接口API是一种用于获取电商平台上商品详情数据的接口,通过…

JVM调优指令参数

常用命令查找文档站点:https://docs.oracle.com/javase/8/docs/technotes/tools/unix/index.html -XX:PrintFlagsInitial 输出所有参数的名称和默认值,默认不包括Diagnostic和Experimental的参数。可以配合 -XX:UnlockDiagnosticVMOptions和-XX:UnlockEx…

【Locomotor运动模块】抓取:按朝向抓取(Orientation Handler)案例

文章目录 案例原理 案例 左右手柄抓宝剑时,宝剑的朝向不同 L35 一个手柄对应一个抓取点 原理 1、左右手柄分别抓取的是宝剑上的不同抓取点——GenericOrientation Handle通用朝向把手 它是我们设置“按朝向抓取”(Orientation Handler)时&…

项目一:基于YOLOv7的输电线路销钉缺失检测项目

1. YOLOv7模型介绍 YOLOv7是目标检测算法YOLO(You Only Look Once)的第七个版本,也是目前较流行的YOLO算法版本之一。 YOLOv8主要结构: 1. Backbone网络:采用CSPDarknet53作为主干网络,在不增加参数数量…

【牛客网题目】合并两个排序的链表

目录 描述 题目分析 描述 输入两个递增的链表,单个链表的长度为n,合并这两个链表并使新链表中的节点仍然是递增排序的。 数据范围:0≤n≤1000,1000≤节点值≤1000 要求:空间复杂度 O(1),时间复杂…

自然语言处理的多行业应用

在我们小时候,甚至是我们会走路或说话之前,就已经在察觉周围发出的声音了。我们倾听其他人发出的声响和声音。我们将声音组合成有意义的词语,例如“母亲”和“门”,并学习解读周围人的面部表情,以加深我们对词组的理解…

现浇钢筋混泥土楼板施工岗前安全VR实训更安全高效

建筑行业天天与钢筋混凝土砼在,安全施工便成了企业发展的头等大事。 当今社会,人人都奉行生命无价,安全至上。可工地安全事故频繁发生,吞噬掉多少宝贵生命。破坏了多小个家庭?痛定死痛,为了提高施工人员的安全意识。 …

密度图及山脊图绘图基础

文章目录 3 种绘制密度图方法对比多组数据、同一个核函数渐变颜色填充“山脊”图同一坐标系中多个密度图的绘制 Seaborn 的 kdeplot() 函数是 Python 中绘制密度图的方式之一,Matplotlib 在现阶段则没有具体的绘制密度图的函数,一般是结合 Scipy 库中的 …

使用多进程的方式改写聊天程序(有名管道)

目录 1、思路2 、步骤 1、思路 2 、步骤 步骤1&#xff1a;创建两个管道 makefifo fifo1 fifo2步骤2&#xff1a;编写talkA.c文件 #include<stdio.h> #include<stdlib.h> #include<string.h> #include<sys/types.h> #include<sys/stat.h> #in…

ChatGPT怎么辅助解决社会问题?

ChatGPT作为一个强大的自然语言处理模型&#xff0c;具有潜力辅助解决多种社会问题。其能力可以应用于信息传递、教育、宣传、意识提高等领域&#xff0c;为社会问题的解决提供支持。以下将详细探讨ChatGPT如何辅助解决社会问题。 **1. 教育与意识提高**&#xff1a; ChatGPT可…

智慧排水监测系统,科技助力城市排水治理

城市里&#xff0c;人们每天通过道路通行&#xff0c;人多&#xff0c;路窄&#xff0c;都会拥堵。同样&#xff0c;下雨天&#xff0c;雨水通过雨篦汇集、管道输送&#xff0c;最终排出去&#xff0c;当雨水过大&#xff0c;或者管道过窄&#xff0c;或者管道不通畅&#xff0…

工控上位机程序为什么只能用C语言?

工控上位机程序并不只能用C#开发&#xff0c;实际上在工业自动化领域中&#xff0c;常见的上位机开发语言包括但不限于以下几种&#xff1a;C#: C#是一种常用的编程语言&#xff0c;在工控领域中被广泛使用。它具有良好的面向对象特性和丰富的类库支持&#xff0c;可以实现高性…

【Vue】快速上手--Vue 3.0

什么是 Vue&#xff1f;​ Vue (发音为 /vjuː/&#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;帮助你高效地开发用户界面。无论是简单还是复杂的…

怎么从0到1创建一个PHP框架-2?

写在前面 本人开发的框架在2021年年初开发完成&#xff0c;后面没有再做过任何维护和修改。是仅供大家参考交流的学习项目&#xff0c;请勿使用在生产环境&#xff0c;也勿用作商业用途。 框架地址&#xff1a; https://github.com/yijiebaiyi/fast_framework 实现缓存 框架…