前后端分离怎么打包,看我就够了

2020-07-28  本文已影响0人  一万年不是尽头

2020了,新项目应该大多都采用前后端完全分离了,前后端采用ajax进行交互,不再像以前一样了,但从中引发出另一个问题,那就是系统集成打包部署又显得很麻烦,不再像之前一样简单的运行一个命令,多了繁琐的操作。下面由我介绍一下frontend-maven-pluginmaven-resources-plugin这两个插件配合的使用方案

前置条件

项目结构

├── dava-admin
│ ├── web
│ │ ├─── src
│ │ │ ├─── main
│ │ │ │ ├─── java
│ │ │ │ ├─── resources
│ │ │ │ │ ├─── view //此目录是我们的目标路径(实际项目中,看你们个人喜好)
│ │ │ │ │ ├─── 其他文件(夹)
│ │ │ └─── test
│ │ ├─── 其他文件(夹)
│ │ └─── pom.xml
│ ├── view
│ │ ├─── dist //前端打包后的输出文件(实际项目中,看你们个人喜好)
│ │ ├─── node_modules
│ │ ├─── public
│ │ ├─── src
│ │ ├─── package.json
│ │ ├─── 其他文件(夹)
│ │ └─── pom.xml
│ └─── pom.xml

其他环境

java环境配置:https://www.jianshu.com/p/daa560344afe
maven环境:以后补充

配置

dava-admin下的pom.xml

<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">
    <modelVersion>4.0.0</modelVersion>
    <groupId>xyz.dava</groupId>
    <artifactId>dava-admin</artifactId>
    <version>1.0-SNAPSHOT</version>
    <modules>
        <module>view</module>
        <module>web</module>
    </modules>
    <packaging>pom</packaging>
</project>

view 下的pom.xml

<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>dava-admin</artifactId>
        <groupId>xyz.dava</groupId>
        <version>1.0-SNAPSHOT</version>
     </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>view</artifactId>

    <properties>
        <frontend-maven-plugin.version>1.6</frontend-maven-plugin.version>
    </properties>
    <build>
        <plugins>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>${frontend-maven-plugin.version}</version>
                <executions>
                    <execution>
                        <id>install node and yarn</id>
                        <goals>
                            <goal>install-node-and-yarn</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <nodeVersion>v12.16.2</nodeVersion>
                            <yarnVersion>v1.22.4</yarnVersion>
                        </configuration>
                    </execution>
                    <execution>
                        <id>yarn install</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <configuration>
                            <arguments></arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>yarn build</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <configuration>
                            <arguments>build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

web 下的pom.xml

<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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <artifactId>dava-admin</artifactId>
        <groupId>xyz.dava</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <artifactId>web</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>web</name>
    <description>ims平台后台管理系统</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>
    <build>
        <finalName>dava-admin</finalName>
        <plugins>
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>copy Vue.js frontend content</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>src/main/resources/view</outputDirectory>
                            <overwrite>true</overwrite>
                            <resources>
                                <resource>
                                    <directory>${project.parent.basedir}/view/dist</directory>
                                    <includes>
                                        <include>**</include>
                                    </includes>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

打包

经过简单的设置然后在dava-admin目录下执行mvn package

上一篇 下一篇

猜你喜欢

热点阅读