vue前端自动化部署到服务器nginx

Jack-LRF

已于 2022-09-01 17:08:20 修改

阅读量779

点赞数

文章标签：前端自动化服务器

于 2022-09-01 16:51:48 首次发布

本文链接：https://blog.csdn.net/li199777/article/details/126646640

版权

本文介绍了如何利用ZX库在Node.js环境中执行Bash命令，通过示例展示了如何创建一个预构建脚本，用于将本地文件复制到Linux远程服务器。在package.json中配置了npm命令，使得在构建过程中可以自动运行这个预构建脚本，从而简化了部署流程。同时提到了Linux下配置免密登录以方便自动化操作。

摘要由CSDN通过智能技术生成

安装zx

zx 是谷歌实现的一个能在 node 中写 bash 的库

使用$``框起想要执行的命令，就可以直接执行 bash。

这个库的最大的便捷在于，node 和标准的 bash 都是我们非常熟悉的东西。只需要知道最基本的库的使用，就可以很快上手，写出功能很强大的工具。

具体查看聊聊去年最火的前端库zx

在根目录下创建scripts文件夹，进入创建prebuild.mjs

mkdir scripts

cd scripts

touch prebuild.mjs

prebuild.mjs代码如下

import { $, argv } from "zx";

export const isWin = () => {
  // win32 代表window平台
  // darwin 代表mac平台
  //
  return process.platform === "win32" ? true : false;
}


const root = process.cwd()
let dir = isWin() ? 'dist': root  // dist是压缩包所在位置
console.log(dir)
let path = `${dir}` 

const gitPullInfo = await $`scp -r ${path}/* root@43.143.1.81:/usr/local/nginx/html/`
// const gitPullInfo = await $`cd ${path};`;
if(gitPullInfo.exitCode === 0) {
  console.log('复制到linux远程服务器成功')
} else {
  console.log('发生错误')
}

在package.json scripts对象里修改build执行命令

---
  "scripts": {
    "dev": "vite",
    "build": "vite build --mode development && zx ./scripts/prebuild.mjs",
    "preview": "vite preview",
  }
---


// 或者用
---
  "scripts": {
    "dev": "vite",
    "build": "vite build --mode development",
    "preview": "vite preview",
    "buildtome": "npm run build && zx ./scripts/prebuild.mjs"
  }
---