egg(三):egg中部署前端项目，egg+vue/egg+react

蔚落 2022-09-13 15:20 752阅读 0赞

### 前言： ###

### 来继续探究egg的知识，这里来分析下，egg来作为一个服务端来使用，跟nginx一样，egg里面也是支持部署前端的代码的。 ###

# **目录：** #

实现效果：egg服务+前端代码

相关资料：

和express一样，egg里面也是有一个专门的地方来发送出来静态资源的文件夹，叫做: public , 放在这个文件夹下的是可以直接访问的 。

实现步骤：

1、将我们的项目（jq/js项目），或者是vue/react打包出来的dist直接放在 public下面

（注意：vue打包得用hash的，history的暂时不行）

2、到这一步可以看到页面的效果：因为public是可以发送

页面上输入：http://localhost:7001/public/map/index.html

3、去掉路径上的 /public

(1)打开 config.default.js

(2)加上下面的代码

（3）页面上输入：http://localhost:7001/map/index.html 就可以看到一样的效果了

4、到这一步为止特别想传统的项目，直接指向什么html，jsp这一类的，后面的我们既影响美观，也没必要那么多，我们来继续优化

如果觉得想看我路由详情的，可以点我

（1）打开router.local.js 如果没有，就在你项目的router.js中直接加

（2）打开 controller / html.js （没有创建）

html.js 源码：

（3）配置好了，打开页面，输入：http://localhost:7001/map/index 查看页面

--------------------

# 实现效果：egg服务+前端代码 #

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16][]

# 相关资料： #

### 和 express 一样，egg里面也是有一个专门的地方来发送出来静态资源的文件夹，叫做: public , 放在这个文件夹下的是可以直接访问的 。 ###

# 实现步骤： #

## 1、将我们的项目（jq/js项目），或者是vue/react打包出来的dist直接放在 public下面 ##

### （注意：vue打包得用hash的，history的暂时不行） ###

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_15_color_FFFFFF_t_70_g_se_x_16][]

## 2、到这一步可以看到页面的效果：因为public是可以发送 ##

## 页面上输入：[http://localhost:7001/public/map/index.html][http_localhost_7001_public_map_index.html] ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

## 3、去掉路径上的 /public ##

### (1)打开 config.default.js ###

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_16_color_FFFFFF_t_70_g_se_x_16][]

### (2)加上下面的代码 ###

// 将public下的静态资源重定向到根目录下
      config.static = {
        prefix: '/',
      };

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

### （3）页面上输入：http://localhost:7001/map/index.html 就可以看到一样的效果了 ###

## 4、到这一步为止特别想传统的项目，直接指向什么html，jsp这一类的，后面的我们既影响美观，也没必要那么多，我们来继续优化 ##

### 如果觉得想看我路由详情的，[可以点我][Link 1] ###

### （1）打开router.local.js 如果没有，就在你项目的router.js中直接加 ###

// 页面路由配置
        //--------------------------------------------------
        router.get('/map/index', controller.html.mapIndex);

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

### （2）打开 controller / html.js （没有创建） ###

### html.js 源码： ###

/**
     *  所有的页面路由
     * @param app
     * @returns {HtmlController}
     */
    const path = require('path');
    const fs = require('fs');
    const Controller = require('egg').Controller;
    class HtmlController extends Controller {
      //openlayer地图
      async mapIndex() {
        const { ctx } = this;
        ctx.response.type = 'html';
        ctx.body = fs.readFileSync(path.resolve(__dirname, '../public/map/index.html'));
      }
      //视频项目
      async videoIndex() {
        const { ctx } = this;
        ctx.response.type = 'html';
        ctx.body = fs.readFileSync(path.resolve(__dirname, '../public/video/index.html'));
      }
    }
    module.exports = HtmlController;

### （3）配置好了，打开页面，输入：[http://localhost:7001/map/index][http_localhost_7001_map_index] 查看页面 ###

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/de5dea1bf7974deb9d32137613276a3f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/3bf230bb8f1340ffb99064c0561f29f2.png
[http_localhost_7001_public_map_index.html]: http://localhost:7001/map/index.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/f22df72a294d4c03a87543a4d2465601.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/04f8c0ff5e8445198d383e5d9b0af8a8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/48725ed40c1b4d19b7c596e9c4b6b1cc.png
[Link 1]: https://blog.csdn.net/weixin_44727080/article/details/120534780
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/15a5397442364b3fb1446f02de5dbd76.png
[http_localhost_7001_map_index]: http://localhost:7001/map/index
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/30380f6c910d40d0901d17f3fcc28a36.png