Vue项目如何通过命令或Git触发自动打包并上传到服务器？

Question

Vue项目如何通过命令或Git触发自动打包并上传到服务器？

_SYY_

4932029

发布于
今天 09:52 广西桂林市

在写vue项目的时候如何做到上传代码即自动打包发布到服务器?

就是比如有一个VUE项目现在已经完成编写
想通过一个命令或者是上传私有git时触发自动打包发布到服务器而不需要去服务器上登录然后删除文件替换这种麻烦的操作
此时我需要看什么东西或者工具才能实现这个功能?

自动化部署 vue.js 前端 github

阅读 57

AI BotBETA

要实现Vue项目通过命令或Git触发自动打包并上传到服务器，你可以采取以下方法：

通过命令触发自动打包并上传到服务器

安装依赖：
在项目根目录下，使用npm安装scp2，这是一个基于ssh2的scp客户端，用于实现文件的安全拷贝。
```
npm install scp2 --save-dev
```

编写上传脚本：

在与package.json平级的位置创建一个脚本文件，例如upload.js。该脚本将使用scp2将打包后的文件上传到服务器。

'use strict';
const scp2 = require('scp2');
const ora = require('ora');
const chalk = require('chalk');

const spinner = ora(chalk.green('正在上传到服务器...')).start();

scp2.scp('./dist/', {
  host: 'XXX.XX.XX.XXX',     // 服务器的IP地址
  port: '22',                // 服务器端口，一般为22
  username: 'XXX',           // 服务器用户名
  password: '*****',         // 服务器密码
  path: '/path/to/remote/'   // 项目部署的服务器目标位置
}, err => {
  spinner.stop();
  if (!err) {
    console.log(chalk.green('项目上传完成'));
  } else {
    console.error('err', err);
  }
});

注意：确保在上传时不包含此脚本文件的敏感信息，如服务器密码等。可以考虑使用环境变量或.env文件来管理这些敏感信息。

修改package.json：
在package.json的scripts部分添加两个命令：build和upload。build命令用于打包Vue项目，upload命令用于执行上传脚本。然后，可以添加一个复合命令来同时执行打包和上传。
```
"scripts": {
  "build": "vue-cli-service build",
  "upload": "node upload.js",
  "deploy": "npm run build && npm run upload"
}
```

现在，运行npm run deploy命令将自动打包项目并上传到服务器。

通过Git触发自动打包并上传到服务器

要实现通过Git触发自动打包并上传到服务器，你可以使用Git的钩子（hook）功能。例如，可以在Git仓库中设置一个post-commit钩子，该钩子在每次提交后自动执行。

创建Git钩子：
在你的Git仓库的.git/hooks目录下创建一个名为post-commit的文件（如果不存在该目录或文件，请创建它们）。
编写钩子脚本：
在post-commit文件中编写脚本，以在每次提交后执行打包和上传命令。例如：
```
#!/bin/bash
cd /path/to/your/vue/project
npm run deploy
```

确保该脚本具有执行权限。你可以使用chmod +x .git/hooks/post-commit命令来设置执行权限。

测试钩子：
在Git仓库中做出一些更改并提交，以测试钩子是否按预期工作。

注意：使用Git钩子触发自动部署时，请确保你的服务器环境已经配置好Node.js和npm，并且你的Vue项目已经正确设置。此外，由于Git钩子是在本地执行的，因此你需要确保你的本地机器有足够的权限来访问服务器并上传文件。如果需要在远程服务器上执行这些操作，你可能需要使用SSH密钥或其他安全机制来配置无密码登录。

以上就是通过命令或Git触发Vue项目自动打包并上传到服务器的方法。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Microsoft

子站问答

访问

Vue项目如何通过命令或Git触发自动打包并上传到服务器？

通过命令触发自动打包并上传到服务器

通过Git触发自动打包并上传到服务器

你尚未登录，登录后可以

不同页面之间可以通过localstorage保存响应式吗？

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

前端有没有办法实现页面截图？

为什么这个动画一直在抖动?

Microsoft