> 前言:为了提升开发效率,原计划用 **jenkins+git** 进行项目自动化部署,但由于公司做的是银行业务,银行的代码只能通过固定的内网ip访问,而银行代码git托管和部署服务器之间又不能相互通信,于是写了两个插件发布到npm和github上,大家可以通过配置方式来实现自动化部署。
## webpack或者vue-cli环境实现方式
* 安装插件 # webpack-automatic-deployment
```sh
npm install webpack-automatic-deployment --save-dev
# OR
yarn add webpack-automatic-deployment --dev
# OR
pnpm add webpack-automatic-deployment --save-dev
```
* Usage 使用方法
webpack使用方法:配置**webpack.config.js**
```js
const WebpackAutomaticDeployment = require("webpack-automatic-deployment");
module.exports = {
plugins: [new WebpackAutomaticDeployment({
host: 'your server ip',
username: 'your server users',
password: 'your server password',
remotePath: 'your project path on the server '
})],
};
```
vue cli使用方法:配置**vue.config.js**
```js
const WebpackAutomaticDeployment = require("webpack-automatic-deployment");
module.exports = {
configureWebpack: {
plugins: [
new WebpackAutomaticDeployment({
host: 'your server ip',
username: 'your server users',
password: 'your server password',
remotePath: 'your project path on the server '
})
]
}
};
```
💪 配置好后,运行 **npm run build** 命令即可实现代码打包后自动上传部署至服务器
⚠️ **特别注意:**
* 1.项目中配置的要有process.env.NODE_ENV为production的值,否则插件不会生效
* 2.服务器上的项目路径要指定到**项目文件夹**,因为每次上传前会先删除文件夹
+ 如:您项目上传服务器的地址为:/root/www,你的项目文件夹名为 project_demo,那么对应配置的时候remotePath的值应为:/root/www/project_demo
## vite环境实现方式
* 安装插件 # vite-plugin-auto-deploy
```sh
npm install vite-plugin-auto-deploy --save-dev
# OR
yarn add vite-plugin-auto-deploy --dev
# OR
pnpm add vite-plugin-auto-deploy --save-dev
```
* Usage 使用方法
+ 配置 **vite.config.ts**
```js
import autoDeployPlugin from 'vite-plugin-auto-deploy'
export default defineConfig({
plugins: [
autoDeployPlugin({
host: 'your server ip',
username: 'your server users',
password: 'your server password',
remotePath: 'your project path on the server '
})
]
})
```
⚠️ **注意事项:** 同上
⚠️ 如果您觉得插件用的不错,请在github上点个 **start** 支持一下