一.打包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.成功界面