web前端之vue一键部署的shell脚本和它的点.bat文件、海螺AI、ChatGPT

news2024/11/26 20:42:18

MENU

  • 前言
  • vite.config.ts的配置
  • deploy文件夹的其他内容
  • remote.sh
  • pwd.txt
  • deploy.bat


前言

1、在src同级新建deploy.bat文件;
2、在src同级新建deploy文件夹,文件夹中新建pwd.txtremote.sh文件;
3、配置好后,直接双击deploy.bat文件即可启动打包和上传部署。


vite.config.ts的配置

import { UserConfig, ConfigEnv, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';
import { createHtmlPlugin } from 'vite-plugin-html';

export default ({ mode }: ConfigEnv): UserConfig => {
    // 获取.env环境配置文件
    const env = loadEnv(mode, process.cwd());

    return {
        build: {
            outDir: 'wdd-admin'
        },
        server: {
            host: '0.0.0.0',
            port: 8080,
            // 运行自动打开浏览器
            open: true,
            proxy: {
                '/api': {
                    target: env.VITE_API_URL,
                    changeOrigin: true
                }
            }
        },
        plugins: [
            vue(),
            createHtmlPlugin({
                inject: {
                    data: {
                        VITE_APP_SYSTEM_NAME: env.VITE_APP_SYSTEM_NAME
                    }
                }
            }),
            createSvgIconsPlugin({
                // 指定需要缓存的图标文件夹
                iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
                // 指定symbolId格式
                symbolId: 'icon-[dir]-[name]'
            })
        ],
        resolve: {
            // Vite路径别名配置
            alias: {
                '@': path.resolve('./src')
            }
        }
    };
};

deploy文件夹的其他内容

deploy


PLINK.EXEPSCP.EXE文件是脚本自带的插件,需要下载。


remote.sh

cd /aly/local/web
rm -rf admin.old
mv admin admin.old
tar -xf deploy-admin.tar
chmod -R 755 admin
rm -f deploy-admin.tar

pwd.txt

服务器密码。


deploy.bat

代码

@ECHO OFF

SET host=186.28.68.8
SET port=22
SET user=root

@REM 判断密码文件是否存在
IF NOT EXIST deploy/pwd.txt (
    ECHO 提示:请在deploy目录下新建pwd.txt,并将密码存入该文件中
    EXIT
)

@REM 工作目录设置为脚本所在目录
CD /d %~dp0

@REM 打包上传项目文件
CALL npm run build-hw
tar -cf deploy/deploy-admin.tar wdd-admin
CD deploy
ECHO 上传文件中...
PSCP -P %port% -pwfile pwd.txt deploy-admin.tar %user%@%host%:/usr/local/wdd/web
DEL deploy-admin.tar

@REM 解压项目文件
ECHO 解压文件中...
PLINK -ssh -batch -P %port% -pwfile pwd.txt %user%@%host% -m remote.sh

ECHO 项目部署完成
ECHO https://186.28.68.8:6008/

start https://186.28.68.8:6008/

解析
ChatGPT

这段批处理脚本(Batch script)用于自动化项目的部署,主要功能是上传和解压项目文件。


@ECHO OFF

这一行关闭命令行回显,即在执行命令时不会显示具体命令内容,保持界面的整洁。


SET host=186.28.68.8
SET port=22
SET user=root

这三行设置了一些变量,host表示服务器地址,port表示端口号,user表示用户名。


@REM 判断密码文件是否存在
IF NOT EXIST deploy/pwd.txt (
		ECHO 提示:请在deploy目录下新建pwd.txt,并将密码存入该文件中
		EXIT
)

这段代码是一个判断语句,用于检查密码文件deploy/pwd.txt是否存在。如果不存在,则提示用户创建该文件并将密码存入其中,然后退出脚本。


@REM 工作目录设置为脚本所在目录
CD /d %~dp0

这行命令将工作目录设置为脚本所在目录,以确保脚本中的路径都相对于脚本文件本身。


@REM 打包上传项目文件
CALL npm run build-hw
tar -cf deploy/deploy-admin.tar wdd-admin
CD deploy
ECHO 上传文件中...
PSCP -P %port% -pwfile pwd.txt deploy-admin.tar %user%@%host%:/usr/local/wdd/web
DEL deploy-admin.tar

这一段代码用于打包和上传项目文件:
1、CALL npm run build-hw:执行构建命令,生成项目的构建文件。
2、tar -cf deploy/deploy-admin.tar wdd-admin:将wdd-admin目录打包为deploy-admin.tar文件。
3、CD deploy:切换到deploy目录。
4、ECHO 上传文件中…:显示上传文件提示。
5、PSCP -P %port% -pwfile pwd.txt deploy-admin.tar %user%@%host%:/usr/local/wdd/web:使用PSCP命令将打包文件上传到服务器指定目录。
6、DEL deploy-admin.tar:删除本地的打包文件。


@REM 解压项目文件
ECHO 解压文件中...
PLINK -ssh -batch -P %port% -pwfile pwd.txt %user%@%host% -m remote.sh

这一段代码用于在服务器上解压项目文件:
1、ECHO 解压文件中…:显示解压文件提示。
2、PLINK -ssh -batch -P %port% -pwfile pwd.txt %user%@%host% -m remote.sh:使用PLINK命令连接到服务器并执行远程脚本remote.sh,该脚本通常用于在服务器上解压和配置项目文件。


ECHO 项目部署完成
ECHO https://186.28.68.8:6008/

这两行显示项目部署完成的提示和项目访问地址。


start https://186.28.68.8:6008/

这一行在默认浏览器中打开项目的访问地址。


总结
该脚本通过一系列命令实现了从构建项目、打包文件、上传文件到服务器以及在服务器上解压文件的自动化部署流程。需要确保以下几点:
1、deploy/pwd.txt 文件存在,并且包含正确的密码。
2、本地环境安装了npm、PSCP和PLINK工具。
3、服务器端的 remote.sh 脚本存在并且配置正确。


海螺AI

这段代码是一个Windows批处理脚本,用于自动化部署一个Web项目到远程服务器。


@ECHO OFF

这行命令关闭命令回显,即执行命令时不会在命令行窗口显示这些命令本身。


SET host=186.28.68.8

设置变量host为远程服务器的IP地址186.28.68.8。


SET port=22

设置变量port为远程服务器的SSH端口22。


SET user=root

设置变量user为远程服务器的用户名root。


@REM 判断密码文件是否存在
IF NOT EXIST deploy/pwd.txt (
		ECHO 提示:请在deploy目录下新建pwd.txt,并将密码存入该文件中
		EXIT
)

检查deploy目录下是否存在pwd.txt文件,如果不存在,则提示用户创建该文件并输入密码,然后退出脚本。


@REM 工作目录设置为脚本所在目录
CD /d %~dp0

改变当前目录到脚本所在的目录。


@REM 打包上传项目文件
CALL npm run build-hw

调用npm执行build-hw脚本,这通常用于构建项目。


tar -cf deploy/deploy-admin.tar wdd-admin

使用tar命令创建一个名为deploy-admin.tar的压缩包,包含wdd-admin目录。


CD deploy

切换当前目录到deploy。


ECHO 上传文件中...

显示提示信息,告知用户接下来将上传文件。


PSCP -P %port% -pwfile pwd.txt deploy-admin.tar %user%@%host%:/usr/local/wdd/web

使用PSCP(PuTTY Secure Copy)命令将deploy-admin.tar文件上传到远程服务器的/usr/local/wdd/web目录。-P指定端口,-pwfile指定包含密码的文件,%user%@%host%指定了远程服务器的用户名和IP地址。


DEL deploy-admin.tar

删除本地的deploy-admin.tar文件。

@REM 解压项目文件
ECHO 解压文件中...

显示提示信息,告知用户接下来将解压文件。


PLINK -ssh -batch -P %port% -pwfile pwd.txt %user%@%host% -m remote.sh

使用PLINK(PuTTY Link)命令通过SSH连接到远程服务器,并执行remote.sh脚本。-ssh指定使用SSH协议,-batch表示非交互模式,-m指定要执行的脚本文件。


ECHO 项目部署完成

显示提示信息,告知用户项目部署完成。


ECHO https://186.28.68.8:6008/

显示提示信息,告知用户可以通过这个URL访问部署的项目。


start https://186.28.68.8:6008/

在默认的Web浏览器中打开上述URL。


这个脚本的目的是自动化地将本地的Web项目打包、上传到远程服务器,并执行部署脚本,最后提供访问部署项目的URL。注意,这个脚本依赖于PuTTY工具集中的PSCP和PLINK命令,这些命令通常用于Windows系统中进行SSH和SCP操作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1833534.html

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

相关文章

生成式人工智能备案办理指南,深度解析大模型备案全流程

早在2023年年初,国家互联网信息办公室、工业和信息化部、公安部针对深度合成服务制定的《互联网信息服务深度合成管理规定》(“《深度合成管理规定》”)顺利施行,其明确了深度合成服务相关方的义务与主体责任,强化了对…

分数布朗运动FBM期权定价模型

BS定价模型和蒙特卡洛模拟期权定价方法都 假设标的资产价格的对数服从布朗运动 . 但是实际 的金融市场中标的资产价格运动过程具有 “尖峰厚尾 ” 现象 , 运用分数布朗运动 (FBM )来刻画标的资产 价格的运动过程可能更加合适。 …

基于OCC+OSG的读取IGS模型显示其装配以及模型颜色

一般来说,读取STP模型会解析其装配结构,而读取IGS模型时候一般不这么做,因为IGS的每个部件大多是面片,而非一个实体模型,所以比如一些开源软件,比如Freecad等都是直接将模型作为一个整体并且在模型树上只显…

HandyControl 使用内置Command 执行无效问题

HandyControl 中通过查阅代码HandyControl_Shared 共享项目中,Interactivity/Commands 目录下,存在着一些内置 Command,开心发现还有关闭窗体,最小化等系统级别常用命令。 CloseWindowCommand.cs ControlCommands.cs OpenLinkCom…

接口自动化测试实战:测试用例也能自动生成

🍅 视频学习:文末有免费的配套视频可观看 🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快 作为测试,你可能会对以下场景感到似曾相识:开发改好的 BUG 反复横跳&…

2024年6月17日 (周一) 叶子游戏新闻

期刊杂志: 聚合读者、意林、知音、故事会、花火以及国内各大知名报纸电子版,无需付费即可观看各种免费资源 中医自学宝典: 集合了中医医案,医经,方剂 药材知识的app,更方便的免费学习中医知识 《最终幻想7》重制三部曲总监鸟山求&…

AI导航网

文章目录 1、[AI导航网](https://www.ainav.cn/) 1、AI导航网 https://www.ainav.cn/

云顶森林的新守护者:大数据平台的智慧力量

在遥远的云顶之上,有一片生机盎然的森林,它不仅是动植物的家园,更是自然与人类和谐共生的典范。然而,如何在这片广袤的森林中实施高效、科学的管理,一直是一个摆在管理者面前的难题。幸运的是,随着科技的飞…

linux 安装 Nginx 并部署 vue 项目

1、安装 yum install nginx2、使用 nginx 命令 查看nginx状态 systemctl status nginx 启动服务 systemctl start nginx停止服务 systemctl stop nginx重启服务 systemctl restart nginx修改配置后重载 systemctl reload nginx 加入开机自启动 systemctl enable ngin…

Qt中利用QTextBrowser控件设计日志窗口

我们一般使用Qt开发应用程序时,都有将控制台窗口去掉。但是,有时候又需要查看一些调试信息,一般的处理方式是把log写到一个文件中。本文介绍以下日志窗口,可以更方便的查看日志信息。 UI设计 推拽UI控件,修改默认背景…

数字孪生定义及应用介绍

数字孪生定义及应用介绍 1 数字孪生(Digital Twin, DT)概述1.1 定义1.2 功能1.3 使用场景1.4 数字孪生三步走1.4.1 数字模型1.4.2 数字影子1.4.3 数字孪生 数字孪生地球平台Earth-2 参考 1 数字孪生(Digital Twin, DT)概述 数字孪…

Linux系统OpenSSH_9.7p1升级详细步骤

版本说明 当前内核版本如下 当前操作系统版本如下 当前OpenSSH版本和OpenSSL版本如下 升级说明 openssh依赖于openssl和zlib,而openssl依赖于zlib,所以我们要先安装zlib,然后是openssl,最后是openssh。zlib-1.3.1下载地址&#…

新版嘎嘎快充互联互通系统配置文档

宝塔环境配置 登录宝塔账号,安装nginx、mysql5.7、php7.2、supervisor、redisphp安装扩展: 1)安装swooleloader72 将嘎嘎官方提供的swoole_loader_72_nts.so文件上传到 /www/server/php/72/lib/php/extensions/no-debug-non-zts-20170718…

阿里巴巴全球数学竞赛报名条件

#竞赛概览与历史# “阿里巴巴全球数学竞赛”(Alibaba Global Mathematics Competition)由阿里巴巴公益、阿里巴巴达摩院共同举办,面向全球的数学爱好者,集竞赛、培训、交流于一体,旨在全球范围内引领开启关注数学、理解…

Debian/Ubuntu linux安装软件

1、官方软件商店安装 2、deb包安装 报错不是sudoers,首先将用户添加到sudo su -l adduser USERNAME sudo exit然后,退出桌面环境并再次登录。 您可以通过输入以下内容来检查上述过程是否成功: groups下载deb包 altshiftf4或右键打开命令行…

【交易策略】#22-24 残差资金流强度因子

【交易策略】#22-24 残差资金流强度因子

Web前端项目-拼图游戏【附源码】

拼图游戏 拼图游戏是一种经典的益智游戏,通过HTML、CSS和JavaScript等前端技术的综合运用来实现;拼图游戏可以锻炼玩家的观察能力、空间认知能力和逻辑思维能力。游戏开始时,一张图片会被切割成多个小块,并以随机顺序排列在游戏区…

脑白金咖啡首辆快闪咖啡车亮相上海,瞄准年轻健康饮品市场

近日,巨人集团旗下脑白金快闪咖啡车现身上海外滩BFC中心,这是继脑白金咖啡在上海地标建筑武康大楼开设快闪店以来,首次以咖啡车形式亮相大众视野。 据「TMT星球」了解,此次快闪活动为期一个月,与合作伙伴共同打造潮流…

Mac 开发vscode常用命令

1 打开vscode settting配置 commandshiftp 输入:Open User Setting 2

如何优雅的了解OpenHarmony-v4.1-Release的init启动流程

一、启动概述 在产品代码成功编译通过后,开始进行下一步的运行调测阶段,而运行调测第一步便需要了解系统的启动过程。对于 OpenHarmony 来说,系统启动流程如下: ---> uboot启动---> uboot启动内核---> 内核挂载根文件系…