springboot和VUE项目打包

Question

如何将VUE和springboot项目打成同一个包，可以直接点击运行，或者使用一个批处理文件.bat文件，直接启动项目。数据库使用的是mysql。根据情况可以添加nginx。尽量使windows电脑不需要下载软甲或者配置。

Answer 1

!春明! 上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

将VUE和springboot项目打成同一个包，可以直接点击运行，或者使用一个批处理文件.bat文件启动项目的解决方案如下：

解决方案一：使用Spring Boot的内嵌Tomcat服务器

1. 修改Vue项目的配置文件，在config/index.js文件中设置assetsPublicPath为根路径/，确保打包后的静态文件可以正确访问。

2. 在Vue项目的根目录下执行npm run build命令，将Vue项目打包生成静态文件。

3. 将生成的静态文件dist目录下的所有文件复制到Spring Boot项目的src/main/resources/static目录下。

4. 在Spring Boot项目中添加Spring Boot Maven插件，配置pom.xml文件，确保可以将Spring Boot项目打包成可执行的jar包。 示例的pom.xml文件如下：

<plugin>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-maven-plugin</artifactId>
  <configuration>
    <mainClass>com.example.Application</mainClass> <!-- 指定Spring Boot项目的启动类 -->
  </configuration>
  <executions>
    <execution>
      <goals>
        <goal>repackage</goal>
      </goals>
    </execution>
  </executions>
</plugin>

1. 在Spring Boot项目的启动类中，添加@RestController注解，创建一个用于访问静态文件的接口。示例代码如下：

@RestController
public class StaticController {

    @RequestMapping("/")
    public String index() {
        return "index";
    }

}

1. 使用Maven命令将Spring Boot项目打包成jar文件：mvn clean package。

2. 在Spring Boot项目的根目录下创建一个批处理文件.bat文件，内容如下：

java -jar your-project-name.jar

1. 双击批处理文件.bat即可启动Spring Boot项目。

解决方案二：使用Nginx进行反向代理

1. 将Vue项目打包生成静态文件，生成的文件复制到Nginx的静态文件目录下，例如/usr/share/nginx/html。

2. 修改Nginx的配置文件nginx.conf，配置反向代理，将请求转发到Spring Boot项目的地址和端口。 示例nginx.conf文件的配置如下：

http {
    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /usr/share/nginx/html;
            index  index.html;
        }

        location /api {
            proxy_pass        http://localhost:8080;   # 替换成Spring Boot项目的地址和端口
            proxy_set_header  X-Real-IP  $remote_addr;
        }
    }
}

1. 启动Nginx。

2. 在Spring Boot项目的启动类中，添加@RequestMapping注解，创建一个用于访问接口的方法。示例代码如下：

@RestController
public class ApiController {

    @RequestMapping("/api/test")
    public String test() {
        return "hello";
    }

}

1. 使用Maven命令打包Spring Boot项目。

2. 在Windows电脑上安装Nginx，并启动Nginx服务。

3. 双击Vue项目生成的index.html文件即可访问项目。

使用Nginx进行反向代理的方式可以将前端和后端项目分离部署，更加灵活，并且无需每次修改配置文件后重新打包。