从 0 到 1 构建 Vue3 + Vite + Node 自动化部署图床项目

2023-09-15 07:28:41

引言

对于开发人员来说，轻松管理和高效部署图床至关重要。本指南将带你逐步了解如何使用 Vue3、Vite 和 Node 从头开始构建一个自动化部署图床项目。

先决条件

Node.js 和 npm
Vue CLI
Git

第 1 步：创建 Vue 项目

vue create vue-image-hosting
cd vue-image-hosting

第 2 步：安装依赖项

npm install -D @vitejs/plugin-vue

第 3 步：配置 Vite

在 vite.config.js 中添加：

// vite.config.js
export default {
  plugins: [vue()]
};

第 4 步：创建图床服务

在 src/services 目录中创建一个 image.service.js 文件：

// src/services/image.service.js
import axios from 'axios';

export const uploadImage = async (file) => {
  const formData = new FormData();
  formData.append('image', file);

  return axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
};

第 5 步：创建部署脚本

在 package.json 中添加一个部署脚本：

// package.json
{
  "scripts": {
    "deploy": "ssh <user>@<host> <command>"
  }
}

第 6 步：编写 Vue 组件

在 src/components 目录中创建一个 ImageUploader.vue 组件：

<template>
  <div>
    <input type="file" @change="uploadImage">
    <button @click="deploy">Deploy</button>
  </div>
</template>

<script>
import { uploadImage } from '../services/image.service';

export default {
  methods: {
    uploadImage(e) {
      uploadImage(e.target.files[0]);
    },
    deploy() {
      npm run deploy
    }
  }
};
</script>

第 7 步：部署到服务器

在你的服务器上设置一个 Node.js 服务器来处理图像上传：

// server.js
const express = require('express');
const multer = require('multer');

const app = express();

const storage = multer.diskStorage({
  destination: 'uploads/'
});

const upload = multer({ storage });

app.post('/upload', upload.single('image'), (req, res) => {
  res.json({
    success: true,
    file: req.file
  });
});

app.listen(3000);