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

2024-06-17 23:52
文章标签 web vue shell bat ai chatgpt 一键 海螺 前端 脚本 部署 javascript frontend

本文主要是介绍web前端之vue一键部署的shell脚本和它的点.bat文件、海螺AI、ChatGPT，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

MENU

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

前言

1、在src同级新建deploy.bat文件；
2、在src同级新建deploy文件夹，文件夹中新建pwd.txt和remote.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.EXE和PSCP.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 OFFSET 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.shECHO 项目部署完成
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操作。

这篇关于web前端之vue一键部署的shell脚本和它的点.bat文件、海螺AI、ChatGPT的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1070744。

相关文章

揭秘未来艺术：AI绘画工具全面介绍

揭秘未来艺术：AI绘画工具全面介绍

📑前言 随着科技的飞速发展，人工智能（AI）已经逐渐渗透到我们生活的方方面面。在艺术创作领域，AI技术同样展现出了其独特的魅力。今天，我们就来一起探索这个神秘而引人入胜的领域，深入了解AI绘画工具的奥秘及其为艺术创作带来的革命性变革。 一、AI绘画工具的崛起 1.1 颠覆传统绘画模式 在过去，绘画是艺术家们通过手中的画笔，蘸取颜料，在画布上自由挥洒的创造性过程。然而，随着AI绘画工
阅读更多...
【Linux进阶】UNIX体系结构分解——操作系统，内核，shell

【Linux进阶】UNIX体系结构分解——操作系统，内核，shell

1.什么是操作系统？ 从严格意义上说，可将操作系统定义为一种软件，它控制计算机硬件资源，提供程序运行环境。我们通常将这种软件称为内核（kerel)，因为它相对较小，而且位于环境的核心。  从广义上说，操作系统包括了内核和一些其他软件，这些软件使得计算机能够发挥作用，并使计算机具有自己的特生。这里所说的其他软件包括系统实用程序（system utility）、应用程序、shell以及公用函数库等
阅读更多...
一份LLM资源清单围观技术大佬的日常；手把手教你在美国搭建「百万卡」AI数据中心；为啥大模型做不好简单的数学计算？ | ShowMeAI日报

一份LLM资源清单围观技术大佬的日常；手把手教你在美国搭建「百万卡」AI数据中心；为啥大模型做不好简单的数学计算？ | ShowMeAI日报

👀日报&周刊合集 | 🎡ShowMeAI官网 | 🧡 点赞关注评论拜托啦！ 1. 为啥大模型做不好简单的数学计算？从大模型高考数学成绩不及格说起 司南评测体系 OpenCompass 选取 7 个大模型 (6 个开源模型+ GPT-4o)，组织参与了 2024 年高考「新课标I卷」的语文、数学、英语考试，然后由经验丰富的判卷老师评判得分。 结果如上图所
阅读更多...
UE3脚本UnrealScript UC语法点滴

UE3脚本UnrealScript UC语法点滴

持续更新 目录 类定义修饰符  1.dependson(CLASSNAME） 2.config(ININAME) 3.native 4.notplaceable 5.inherits(CLASSNAME1[,CLASSNAME2,...]) 类对象实例创建 类默认属性设置 变量 1.声明 var local 2.修饰符 config  3.array 类型变量 以及
阅读更多...
UnrealScriptIDE调试环境部署

UnrealScriptIDE调试环境部署

先安装vs2010   再安装VSIsoShell.exe， 下载地址 https://pan.baidu.com/s/10kPNUuDGTbWXbz7Nos-1WA       fd3t   最后安装unside，下载地址 https://archive.codeplex.com/?p=uside  安装中间有一步选择Binary文件夹要选对路径。   安装好以后，启动 UDKDe
阅读更多...
AI儿童绘本创作

AI儿童绘本创作

之前分享过AI儿童绘画的项目，但是主要问题是角色一致要花费很长的时间！ 今天发现了这款，非常奈斯！ 只需输入故事主题、风格、模板，软件就会自动创作故事内容，自动生成插画配图，自动根据模板生成成品，测试效果如下图。 变现方式：生成儿童绘本发布到各平台，吸引宝妈群体进私域。  百度网盘 请输入提取码百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全
阅读更多...
vue, 左右布局宽，可拖动改变

vue, 左右布局宽，可拖动改变

1：建立一个draggableMixin.js  混入的方式使用 2：代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr
阅读更多...
vue项目集成CanvasEditor实现Word在线编辑器

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址：https://github.com/Hufe921/canvas-editor 前提声明： 由于CanvasEditor目前不支持vue、react 等框架开箱即用版，所以需要我们去Git下载源码，拿到其中两个主
阅读更多...
React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装，可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 （1）通过position属性,可以控制下拉选项的位置 （2）通过传入width属性, 可以自定义下拉选项的宽度 （3）通过传入classN
阅读更多...
android一键分享功能部分实现

android一键分享功能部分实现

为什么叫做部分实现呢，其实是我只实现一部分的分享。如新浪微博，那还有没去实现的是微信分享。还有一部分奇怪的问题：我QQ分享跟QQ空间的分享功能，我都没配置key那些都是原本集成就有的key也可以实现分享，谁清楚的麻烦详解下。 实现分享功能我们可以去www.mob.com这个网站集成。免费的，而且还有短信验证功能。等这分享研究完后就研究下短信验证功能。 开始实现步骤（新浪分享，以下是本人自己实现
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2