使用Egg和Vite做前后端

最新推荐文章于 2024-05-21 23:21:19 发布

ytfcy_

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量234

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/ytfcy_/article/details/131094637

版权

原理

Egg 和 Vite 是一组适合前后端分离方案的工具。使用 Egg.js 和 Vite 做前后端分离的原理如下：

在前端项目通过 Vite 构建成独立的静态文件，包括 HTML、CSS、JavaScript 等。
在 Egg.js 中，定义一个中间件，用于代理前端请求和后端请求。
在 Egg.js 中，设置一个静态文件目录 (例如 app/public)，将前端构建出来的静态文件拷贝到这个目录下，用于后端服务的静态文件访问。
在 Egg.js 中启动一个 HTTP 服务器，监听对应的端口，用于提供后端服务。
在 Vite 中启动一个 HTTP 服务器，监听对应的端口，用于提供前端服务。
利用中间件将前端请求代理到 Vite 的 HTTP 服务器，将后端请求代理到 Egg.js 的 HTTP 服务器。
在前端代码中访问后端 API，使用相对路径或绝对 URL，与代理配置相对应。

优缺点

Egg.js 和 Vite 的结合，相较于传统的前后端集成方式，有如下优缺点：

优点：

方便前后端分离开发，每个团队专注于自己的业务实现，减少团队间的协作和沟通成本。
利用 Vite 的高效构建和开发体验，能够大大提高前端开发的效率和代码质量。
利用 Egg.js 的多进程模型和插件机制，能够很好地保证整个网站的稳定性和性能。
利用中间件和代理等技术，能够快速响应前端请求和后端请求，并对请求进行统一管理和监控。

缺点：

需要配置中间件和代理等参数，增加了部署和维护的复杂度。
依赖多个技术栈，需要同时掌握 Egg.js、Vite、前端框架等多个技术。
对 CPU 和内存的占用较高，需要考虑服务器配置和成本问题。

搭建步骤

Egg.js 和 Vite 的结合，具体的步骤如下：

创建 Egg.js 应用

创建一个 Egg.js 应用，采用简单模式：

npx egg-init myapp --type=simple

安装 Vite

通过 npm 安装 Vite：

npm install vite --save-dev

创建前端项目

在 Egg.js 应用下，创建一个空目录 myweb，用于存放前端项目。

mkdir myweb

cd myweb

使用 npm 初始化 myweb 目录：

npm init -y

在 myweb 目录下，使用 npm 安装所需的前端框架（例如 Vue.js）和组件库（例如 ElementUI）：

npm install vue element-ui --save

编写前端代码

编写前端代码，例如在 myweb 目录下编写 `main.js` 和 `index.html`：

`index.html`：
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My App</title>
    <link rel="stylesheet" href=""/>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.js"></script>
  </body>
</html>
```

配置 Vite

在 myweb 目录下，创建一个 `vite.config.js` 配置文件，配置 Vite：

```javascript
import { defineConfig } from 'vite';
export default defineConfig({
  base: './',
  server: {
    host: '192.168.2.35',
    port: 83,
    /** 把vite配置成代理服务器 */
    proxy: {
      '/api': {
        target: 'http://192.168.2.35:7001' /** 目标服务器 */,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});
```