前后端分离的vue项目如何合并?springboot 单体应用

首先是有这么两个应用,前端是vue项目,后端是springboot 构建的服务端

现在是需求是,这个项目很轻量级,完全没必要部署为两个应用,因此需要重新合并,具体步骤如下:

第一步:vue项目先打包,执行命令:npm run build,执行成功后,会在项目路径下多出一个dist文件夹,里面包含css+js+images+html等各种前端资源,执行结果如下


> default@0.1.0 build D:\HBuilderProjects\msg-center-front
> vue-cli-service build


/  Building for production...Browserslist: caniuse-lite is outdated. Please run next command `npm update`
/  Building for production...Browserslist: caniuse-lite is outdated. Please run next command `npm update`
-  Building for production...

 WARNING  Compiled with 3 warnings                                                                              17:31:11

 warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  js/chunk-vendors.99673027.js (992 KiB)

 warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (1.18 MiB)
      css/chunk-vendors.fca7781b.css
      js/chunk-vendors.99673027.js
      css/app.40651d27.css
      js/app.76981012.js


 warning

webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

  File                                   Size              Gzipped

  dist\js\chunk-vendors.99673027.js      992.33 KiB        273.23 KiB
  dist\js\app.76981012.js                12.06 KiB         4.97 KiB
  dist\css\chunk-vendors.fca7781b.css    205.35 KiB        32.89 KiB
  dist\css\app.40651d27.css              0.16 KiB          0.14 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html


D:\HBuilderProjects\msg-center-front>

第二步,把dist文件夹下面的文件,全部复制到后端项目的static目录下。

第三步,也是比较重要的异步,配置错误异常页面处理。


import org.springframework.boot.web.server.ErrorPage;
import org.springframework.boot.web.server.ErrorPageRegistrar;
import org.springframework.boot.web.server.ErrorPageRegistry;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Component;

/**
 * 错误页面处理类
 */
@Component
public class ErrorConfig implements ErrorPageRegistrar {

    /**
     * 404页面错误处理方法,重定向至index.html页面
     * @param registry
     */
    @Override
    public void registerErrorPages(ErrorPageRegistry registry) {
        ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
        registry.addErrorPages(error404Page);
    }
}

到此,合并已经完成,启动后端项目,访问之前的前端地址,效果达成!

 

  • 7
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue SpringBoot前后端分离项目是一种常见的开发模式,其中前端使用Vue框架进行开发,后端使用SpringBoot框架进行开发。在这种项目中,前后端通过API进行数据交互,实现前后端的解耦和独立开发。 在建立项目时,可以选择使用路由选项,这样就不需要再次安装路由。同时,需要安装axios库来进行前后端的数据交互。 项目的搭建过程包括前端Vue的搭建和后端项目的构建。前端搭建可以使用IDEA和Vue Element UI等工具,后端项目可以使用SpringBoot和Mybatis-Plus等框架。在构建过程中,需要在pom文件中引入相应的jar包,并在yml文件中配置数据库连接和端口设置。同时,还需要编写controller层、service层、imp层、mapper和实体类等代码,以及解决跨域问题。 在项目完成后,可以进行测试,确保前后端的数据交互和功能正常运行。 总结来说,Vue SpringBoot前后端分离项目是一种通过API进行数据交互的开发模式,前端使用Vue框架,后端使用SpringBoot框架,通过搭建和配置实现前后端的解耦和独立开发。 #### 引用[.reference_title] - *1* [springboot+vue前后端分离项目(后台管理系统)](https://blog.csdn.net/qq_52050769/article/details/119685283)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [spring boot+vue前后端项目的分离(我的第一个前后端分离项目)](https://blog.csdn.net/weixin_43304253/article/details/122093289)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值