docker打包vue vite前端项目

news2024/11/29 22:33:53

打包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 nginx

RUN rm /etc/nginx/conf.d/default.conf

ADD 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.coloradmin.cn/o/951593.html

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

相关文章

Vulnhub: Ragnar Lothbrok: 1靶机

kali:192.168.111.111 靶机:192.168.111.226 信息收集 端口扫描 nmap -A -sC -v -sV -T5 -p- --scripthttp-enum 192.168.111.226 作者提示修改hosts文件 目录爆破 gobuster dir -u http://armbjorn -w /usr/share/wordlists/dirbuster/directory-l…

自动驾驶攻城战,华为小鹏先亮剑

点击关注 文|刘俊宏 编|苏扬、王一粟 本文为光锥智能x腾讯科技联合出品 2023年过半,城市NOA(城市领航辅助驾驶)的元年如预期中到来了吗? 8月25日,成都车展开幕,与4个月之前的上海…

尚硅谷SpringMVC

五、域对象共享数据 1、使用ServletAPI向request域对象共享数据 首页&#xff1a; Controller public class TestController {RequestMapping("/")public String index(){return "index";} } <!DOCTYPE html> <html lang"en" xmln…

Javascript 中的 debugger 拦截

debugger 指令&#xff0c;一般用于调试&#xff0c;在如浏览器调试执行环境中&#xff0c;可以在 JavaScript 代码中产生中断。 如果想要拦截 debugger&#xff0c;是不容易的&#xff0c;常用的函数替代、proxy 方法均对它无效&#xff0c;如&#xff1a; window.debugger …

chrono学习(一)

我想用chrono进行沙土的仿真&#xff0c;首先学习demo_GPU_ballCosim.cpp&#xff0c;这个例子仿真了一些沙土的沉降过程。 首先&#xff0c;运行编辑完成的文件demo_GPU_ballCosim&#xff1a; (base) eowyneowyn-MS-7D20:~/build_chrono/bin$ ./demo_GPU_ballCosim 运行完得…

Laravel 表单验证器的常用的2种使用方法

1、使用控制器的 validate 方法进行参数验证 场景一&#xff1a;前后端未分离 /*** 保存一篇新的博客文章。** param Request $request* return Response*/ public function store(Request $request) {$this->validate($request, [title > required|unique:posts|max:2…

plumelog介绍与应用-一个简单易用的java分布式日志系统

官方文档&#xff1a;http://www.plumelog.com/zh-cn/docs/FASTSTART.html 简介 无代码入侵的分布式日志系统&#xff0c;基于log4j、log4j2、logback搜集日志&#xff0c;设置链路ID&#xff0c;方便查询关联日志基于elasticsearch作为查询引擎高吞吐&#xff0c;查询效率高全…

YOLOv5 如何计算并打印 FPS

文章用于学习记录 YOLO v5 FPS计算方法修改对应自己数据集的 yaml 文件以及训练好的 pt 文件以及batch-size1, FPS 1000ms/(0.311.91.0)pre-process&#xff1a;图像预处理时间&#xff0c;包括图像保持长宽比缩放和padding填充&#xff0c;通道变换&#xff08;HWC->CHW&a…

vr健康管理服务情景化教学弥补现代医学教学中的诸多不足之处

高职高专临床医学院校以培养岗位胜任力为目的&#xff0c;该专业是一门专业性、实践性较强的医学学科&#xff0c;要求培养出来的学生具有较强的临床实践能力&#xff0c;医学生所学的全部知识&#xff0c;都应与实践相结合&#xff0c;解决临床的实际问题&#xff0c;为患者解…

sql server 备份到网络共享

场景&#xff1a;sql server服务器A将数据库备份文件备份到服务器B 1&#xff09;服务器B创建共享目录 这里我将 D:\ProDbBak 共享&#xff0c;并且Everyone完全控制 2&#xff09;sql server服务器A能够访问服务器B共享目录&#xff0c;并且能完全控制 3&#xff09;修改服务…

GPT-3在化学中进行低数据发现是否足够?

今天介绍一份洛桑联邦理工学院进行的工作&#xff0c;这份工作被发表在化学期刊预印本网站上。 对于这份工作&#xff0c;有兴趣的朋友可以通过我们的国内ChatGPT镜像站进行测试使用&#xff0c;我们的站点并没有针对特定任务进行建设&#xff0c;是通用性质的。 化学领域进行…

QTday1(实现图形化界面、QT工程项目各文件初始程序的介绍)

1.实现图形化界面 #include "widget.h" #include "ui_widget.h" #include <QDebug> //输出函数对应的头文件 #include <QIcon>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(…

Ansible学习笔记11

Command和Shell模块&#xff1a; 两个模块都是用于执行Linux命令的&#xff0c;这个对于命令熟悉的工程师来说&#xff0c;用起来非常high。 Shell模块跟Command模块差不多&#xff08;Command模块不能执行一类$HOME、> 、<、| 等符号&#xff0c;但是Shell是可以的。&…

MySQL函数和约束

MySQL常见函数 字符串常见函数 # concat : 字符串拼接 select concat(Hello , MySQL); # lower : 全部转小写 SELECT LOWER(Hello); # upper : 全部转大写 SELECT UPPER(hello); # lpad : 左填充 SELECT LPAD(hello,10,0); # rpad : 右填充 SELECT RPAD(hello,10,0); # trim…

K8S容器OOM killed排查

背景 数据服务平台南海容器k8s设置的内存上限2GB&#xff0c;多次容器被OOM killed。 启动命令 java -XX:MaxRAMPercentage70.0 -XX:HeapDumpOnOutOfMemoryError -XX:HeapDumpPath/apps/logs/ ***.jar排查过程 1 当收到实例内存超过95%告警时&#xff0c;把jvm进程堆dump下…

kotlin 转 Java

今天突然想研究下有些kotlin文件转为Java到底长什么样&#xff0c;好方便优化kotlin代码&#xff0c;搞了半天发现一个非常简单的Android Studio或者Intellij idea官方插件Kotlin&#xff0c;Kotlin是插件的名字&#xff0c;真是醉了&#xff1b; 这里以AS为例&#xff0c;使用…

git在windows上安装

介绍git工具在windows上如何安装 git官网下载地址 1.1、下载 https://github.com/git-for-windows/git/releases/download/v2.36.0.windows.1/Git-2.36.0-64-bit.exe自行选择版本&#xff0c;这里我选择的是 Git-2.36.0-64-bit这个版本 1.2、安装 安装路径选择英文且不带空格…

九、适配器模式

一、什么是适配器模式 适配器模式&#xff08;Adapter&#xff09;的定义如下&#xff1a;将一个类的接口转换成客户希望的另外一个接口&#xff0c;使得原本由于接口不兼容而不能一起工作的那些类能一起工作。 适配器模式&#xff08;Adapter&#xff09;包含以下主要角色&…

OpenVPN服务器

目录 一、OpenVPN是什么&#xff1f; 二、OpenVPN连接建立的过程 三、数据包远程传输处理过程&#xff08;自我理解&#xff09; 四、OpenVPN实验案例 4.1生成OpenVPN所需证书文件 4.2配置OpenVPN服务器 4.3配置OpenVPN客户端 4.4在远程客户端windows 10上进行测试 一、OpenVPN…

HTML5之drawImage函数

参数说明&#xff1a; drawImage(image, x, y) //按原图片大小绘制。 drawImage(image, x, y, width, height) //按指定大小绘制。 drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) //常用于图片裁剪。 其中&#xff1a…