一.打包vue

想要整合它们，首先打包完的vue的index.html可以直接打开

1.ruoter的路由要设置好,修改路由文件，ruoter里的index.js

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    }
]
const router = createRouter({
  history: createWebHashHistory("/"),
  routes
})

2.修改配置文件vue.config.js

module.exports = defineConfig({
  publicPath: "./", // 打包后将资源路径取消以/开头
  
})

3.修改完以后就可以进行打包了npm run build

会生成一个dist文件夹，直接打开里面的index.html,可以显示内容就成功了。

前端在vue.config.js写跨域打包后会不生效。建议后端写跨域

二.打包SpringBoot

1.将dist文件夹放在resources里的static里（也可以直接放在resources文件里，后面相应的路径需要修改）

2.修改pom.xml文件将文件添加到targe里，将一下内容添加到

<build></build>里

<resources>
			<resource>
				<!-- 加载resources下的dist文件夹 -->
				<directory>src/main/resources/static/dist</directory>
				<targetPath>META-INF/resources/</targetPath>
			</resource>
			<resource>
				<!-- 加载resources下的dist文件夹 -->
				<directory>src/main/resources</directory>
				<includes>
					<include>sql/**</include>
					<include>*.yml</include>
					<include>logback.xml</include>
				</includes>
				<filtering>false</filtering>
			</resource>
		</resources>

3.添加配置文件StaticResourceConfig,可以访问静态文件

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class StaticResourceConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/index.html") // 定义 URL 路径
                .addResourceLocations("classpath:/static/dist/index.html"); // 静态资源路径
        registry.addResourceHandler("/js/**")
                .addResourceLocations("classpath:/static/dist/js/"); // 静态资源js路径
        registry.addResourceHandler("/css/**")
                .addResourceLocations("classpath:/static/dist/css/"); // 静态资源css路径
    }
}

4.进行.jar打包，点击clean后在点击package进行打包就可以了

5.在targe文件夹里生成.jar 

6.运行,在有.jar文件夹里输入运行命令 

java -jar  项目名称.jar

在运行命令后面添加 --spring.config.location=路径\你修改好的配置文件名称.yml

可以指定运行application配置文件

7.成功界面