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.hqwc.cn/news/99356.html

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

相关文章

mysql数据库使用技巧整理

查看当前数据库已建立的client连接 mysql中执行 -- 查看数据库允许的最大连接数,不是实时正在使用的连接数 SHOW VARIABLES LIKE max_connections; mysql中执行 -- 查看当前数据库client的连接数 SHOW STATUS LIKE Threads_connected; mysql中执行 -- 查看具…

Linux中安装MySQL5.7.42

1. 首先,下载mysql5.7.42的安装包(下方是下载地址),选择红色框框的下载(注意的是,这个链接只提供5.7的版本下载,可能还会更新,不一定打开就是5.7.42的版本,后续可能会有4…

LeetCode 热题 100——找到字符串中所有字母异位词(滑动窗口)

题目链接 力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 题目解析 该题目的意思简而言之就是说,从s字符串中寻找与p字符串含有相同字符(次数和种类均相同)的子串,并且将他们的首字符下标集合进数组中进行返回。 滑动窗口解…

AndroidTV端:酒店扫码认证投屏DLNA

被老板叼了几次了,最近实在忍不了,准备离职; 但是担心离职后长时间没有办法找到工作 就想贡献一套平时琢磨出来的程序,请各位有能力的话带我熬过这凛冽的寒冬。 目前写出来的,有三个端:安卓TV端&#xf…

【Windows 常用工具系列 11 -- 笔记本F5亮度调节关闭】

文章目录 笔记本 F 按键功能恢复 笔记本 F 按键功能恢复 使用笔记本在进行网页浏览时,本想使用F5刷新下网页,结果出现了亮度调节,如下图所示: 所以就在网上查询是否有解决这个问题的帖子,结果还真找到了:…

java IO流(三) 转换流 打印流

转换流 前面我们学习过FileReader读取文件中的字符,但是FileReader默认只能读取UTF-8编码格式的文件。如果使用FileReader读取GBK格式的文件,可能存在乱码,因为FileReader遇到汉字默认是按照3个字节来读取的,而GBK格式的文件一个…

【微服务部署】三、Jenkins+Maven插件Jib一键打包部署SpringBoot应用Docker镜像步骤详解

前面我们介绍了K8SDockerMaven插件打包部署SpringCloud微服务项目,在实际应用过程中,很多项目没有用到K8S和微服务,但是用到了Docker和SpringBoot,所以,我们这边介绍,如果使用Jenkinsjib-maven-plugin插件打…

数据结构day7栈-顺序栈的实现

用指针比用数组好&#xff0c;这样用户可以自己指定空间的大小&#xff0c;有参与感。 全部代码: main.c #include <stdio.h> #include <string.h> #include "sqstack.h"int main(int argc, char *argv[]) {sqstack *s;int i;s stack_create(100);if(…

Python continue 语句

Python continue 语句跳出本次循环&#xff0c;而break跳出整个循环。 continue 语句用来告诉Python跳过当前循环的剩余语句&#xff0c;然后继续进行下一轮循环。 continue语句用在while和for循环中。 Python 语言 continue 语句语法格式如下&#xff1a; continue 流程图…

go语言 go mod生成

1. go hello world 创建文件夹gotest&#xff0c;在其中创建test1.go文件&#xff0c;并写入 package mainimport ("fmt" )func main() {fmt.Println("hello world") } 运行命令 go run test1.go 可以看到输出hello world 2. cli 命令行的使用 代码如下…

口才训练方法和技巧有哪些?

口才是一种重要的沟通技能&#xff0c;可以帮助人们更好地表达自己&#xff0c;影响他人&#xff0c;并建立更强的人际关系。在这篇文章中&#xff0c;我们将探讨一些口才训练的方法和技巧&#xff0c;帮助你提高口才水平。 1. 提前准备&#xff1a;在进行任何演讲或公开演讲之…

【Linux网络编程】环境配置篇

由于博主本学期所使用的Linux系统为Ubuntu&#xff0c;所以这篇博客会先以安装虚拟机和Ubuntu开始。 虚拟机的话&#xff0c;可以选择VMware&#xff0c;也可以选择VirtualBox。直接选择安装就行&#xff0c;这个应该是没有什么问题的。但是&#xff0c;如果之前电脑安装过Vmwa…