SpringBoot+Vue项目打jar包

本文详细介绍了如何在开发工具webStorm中打包Vue项目,并将其与SpringBoot项目集成的过程。包括解决打包过程中的常见错误,如npm安装依赖、使用外网避免内网问题、配置静态资源访问等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、打包Vue项目(开发工具webStorm)

vue搭建脚手架报错:rollbackFailedOptinal:verb npm-session

建议使用外网,不要用公司内网

添加依赖:npm install

进行打包:npm run build

之后会出现dist文件夹

将dist下的文件放到idea中的static下

添加静态资源访问的配置和依赖

<!--导入配置文件处理器,配置文件进行绑定就会有提示-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

package com.answer.testvue.config;

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

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath/static/**").resourceChain(true);
    }

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {

        registry.addViewController("/").setViewName("forward:/index.html");


    }
}

因为我的spring boot是个空的项目,没有数据库连接什么的,所以需要跳过数据库自动配置

同时也需要关闭这个,点击闪电按钮,这是为了防止之后打包失败

之后install打包,然后在target下找到打好的jar包并启动

 

启动成功

参考链接:https://blog.youkuaiyun.com/weixin_43085797/article/details/105834457

 

在现代Web应用开发中,Spring BootVue.js是两个非常流行的技术栈。Spring Boot用于后端开发,而Vue.js用于前端开发。为了方便部署,通常会将Spring BootVue.js打成一个可执行的JAR文件。以下是具体的步骤: ### 后端(Spring Boot)打 1. **配置`pom.xml`文件**: 确保你的`pom.xml`文件中Spring Boot的打插件: ```xml <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> ``` 2. **执行打命令**: 在项目根目录下运行以下命令: ```bash mvn clean package ``` 这将生成一个`target`文件夹,里面含你的可执行JAR文件。 ### 前端(Vue.js)打 1. **配置`vue.config.js`文件**: 确保你的`vue.config.js`文件中配置了正确的`outputDir`,例如: ```javascript module.exports = { outputDir: '../src/main/resources/static', publicPath: '/static/' } ``` 2. **执行打命令**: 在前端项目根目录下运行以下命令: ```bash npm run build ``` 这将生成一个`dist`文件夹,里面含静态资源文件。 ### 整合前后端 1. **将前端静态资源复制到后端**: 将前端打生成的`dist`文件夹中的内容复制到后端的`src/main/resources/static`目录下。 2. **重新打后端**: 重新运行后端的打命令: ```bash mvn clean package ``` 这样,后端和前端就整合在一个JAR文件中了。 ### 部署 1. **运行JAR文件**: 将生成的JAR文件上传到服务器,然后运行: ```bash java -jar your-app.jar ``` 这样,你的应用就启动并可以通过浏览器访问了。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dream答案

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值