ruoyi-vue-pro优化——如何将一个模块快速变成一个独立的应用进行开发，部署，管理

1、需求分析

在上篇博文中我们通过单点登录打通了数据大屏模块，即避免了手动输入用户密码，又实现了数据大屏作为菜单内嵌集成，但是还有一个小小的遗憾：单点登录的密码是写在 Vue 界面的，虽然可以通过加密解码的方式解决安全问题（待实现），但通常更通用的情况是通过后端来与 oauth2 server进行通信，密码配置在应用的后端yaml文件中。本篇博文就是由此触发。后端单点登录有点复杂，稍后补上。而要实现此目标，就必须给数据大屏前端模块yudao-ui-go-view-master的配置一个新的后端，因为默认情况下yudao-ui-go-view-master访问的是48080端口，而单点登录会出现第二次登录48080端口，导致token失效，陷入了单点登录的死循环之中。

随着系统功能的不断的增加，模块越来越多，在ruoyi-vue-pro的框架下开发虽然便捷，但是模块及代码量的增多，导致内存受到挑战，影响电脑性能。

分模块开发代码分类，带来另一个好处是各司其职，便于代码管理，避免相互影响。

2、解决方案

仍旧以数据大屏为例。数据大屏前端模块yudao-ui-go-view-master的后端默认配置的是

ruoyi-vue-pro 48080端口，需要为其配置report 后端，将48080端口调整为18080。

原配置如下：

yudao-ui-go-view-master/.env ：

bash 复制代码

VITE_DEV_PORT = '3000'

# development path
# VITE_DEV_PATH = 'https://demo.mtruning.club'
VITE_DEV_PATH = 'http://127.0.0.1:48080'

# production path
VITE_PRO_PATH = 'https://demo.mtruning.club'

# 租户开关
VITE_APP_TENANT_ENABLE=true

# 验证码的开关
VITE_APP_CAPTCHA_ENABLE=true

以及后端代理配置yudao-ui-go-view-master/vite.config.ts

bash 复制代码

  // 开发服务器配置
  server: {
    host: true,
    open: true,
    // port: 3000,
    port: parseInt(loadEnv(mode, process.cwd()).VITE_DEV_PORT||"3000"),
    proxy: {
      [axiosPre]: {
        // @ts-ignore
        target: loadEnv(mode, process.cwd()).VITE_DEV_PATH,
        changeOrigin: true,
        ws: true,
        secure: true,
      }
    }
  },

这里我将server.port 做了一个小优化，取值为上述.env文件中的 VITE_DEV_PORT配置。

3、实现步骤

1）修改前端请求地址

在yudao-ui-go-view-master/.env文件中修改 VITE_DEV_PORT为新的后端地址

bash 复制代码

VITE_DEV_PATH = 'http://127.0.0.1:18080'

2）新增report-app模块

在yudao-module-report下新增yudao-module-report-app模块，如下图

3）配置依赖及打包

在yudao-module-report-app/pom.xml文件中新增依赖配置和打包配置，代码如下：

主要依赖：

yudao-module-infra-biz 文件上传等基础功能

yudao-module-system-biz 账号登陆等基础功能

yudao-module-report-biz

XML 复制代码

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>yudao-module-report</artifactId>
        <groupId>cn.iocoder.boot</groupId>
        <version>1.8.3-snapshot</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>yudao-module-report-app</artifactId>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    <dependencies>
        <dependency>
            <groupId>cn.iocoder.boot</groupId>
            <artifactId>yudao-module-infra-biz</artifactId>
            <version>${revision}</version>
        </dependency>
        <dependency>
            <groupId>cn.iocoder.boot</groupId>
            <artifactId>yudao-module-system-biz</artifactId>
            <version>${revision}</version>
        </dependency>
        <dependency>
            <groupId>cn.iocoder.boot</groupId>
            <artifactId>yudao-module-report-biz</artifactId>
            <version>${revision}</version>
        </dependency>
    </dependencies>

    <build>
        <!-- 设置构建的 jar 包名 -->
        <finalName>${project.artifactId}</finalName>
        <plugins>
            <!-- 配置文件，依赖jar和可执行jar分离的包，便于文件替换发布 -->
            <!-- 复制依赖的jar包到指定的文件夹里，相当于：mvn dependency:copy-dependencies -DoutputDirectory=lib -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-dependency-plugin</artifactId>
                <executions>
                    <execution>
                        <id>copy-dependencies</id>
                        <phase>package</phase>
                        <goals>
                            <goal>copy-dependencies</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${project.build.directory}/lib</outputDirectory>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <!-- 配置依赖和启动类-->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-jar-plugin</artifactId>
                <configuration>
                    <archive>
                        <manifest>
                            <addClasspath>true</addClasspath>
                            <!-- MANIFEST.MF 中 Class-Path 加入前缀 -->
                            <classpathPrefix>lib/</classpathPrefix>
                            <!--指定入口类 -->
                            <mainClass>com.more.doubleu.server.DoubleuServerApplication</mainClass>
                        </manifest>
                        <manifestEntries>
                            <!-- 在Class-Path下添加配置文件的路径，本地jar的引入方式: dependency中的artifactid-version.jar -->
                            <Class-Path>lib/${project.artifactId}-1.8.3-snapshot.jar</Class-Path>
                            <!--这里表示jar路径加入到MANIFEST.MF-->
                        </manifestEntries>
                    </archive>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

4）新增代码及配置

新增应用启动类 cn.iocoder.yudao.module.report.ReportServerApplication。

这里要注意一下，容易启动时报错，无法实例化依赖bean:

@SpringBootApplication(scanBasePackages = {"${yudao.info.base-package}.module"})

java 复制代码

package cn.iocoder.yudao.module.report;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;


@SuppressWarnings("SpringComponentScan") // 忽略 IDEA 无法识别 ${doubleu.info.base-package}
@SpringBootApplication(scanBasePackages = {"${yudao.info.base-package}.module"})
public class ReportServerApplication {

    public static void main(String[] args) {

        SpringApplication.run(ReportServerApplication.class, args);

    }

}

复制yudao-server/src/main/resources下的3个关键配置文件，其他按需复制。

application.yaml

application-local.yaml

logback-spring.xml

修改文件中的服务端口，其他部分酌情修改。

bash 复制代码

server:
  port: 18080

5）运行测试

以后就可以在IDEAL中只导入yudao-module-report子项目进行业务开发了

以后就可以在IDEAL中只导入yudao-module-report子项目进行业务开发了

以后就可以在IDEAL中只导入yudao-module-report子项目进行业务开发了

登陆成功，后端访问的是18080端口

============= 相关博文 ============

ruoyi-vue-pro数据大屏------路由支持history，告别难看的hash路由

ruoyi-vue-pro数据大屏------单点登录，告别手输密码（适用于不带后端服务的情况）

ruoyi-vue-pro优化------如何将一个模块快速变成一个独立的应用进行开发，部署，管理

ruoyi-vue-pro增强------新增通用单点登录模块yudao-module-sso（下载链接在博文末尾）

ruoyi-vue-pro数据大屏优化------在yudao-module-report-app使用yudao-moudle-sso优化单点登录

ruoyi-vue-pro优化------让菜单支持多个参数，一键直达【经营分析】、【生产报表】、【销售报表】

ruoyi-vue-pro优化------模块单独打包，增量更新、部署，告别打包等待，上传等待，节省网络流量

============= 相关博文 ============