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

2023-11-05

首先是有这么两个应用,前端是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);
    }
}

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

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • STM32外设系列—HC-05(蓝牙)

    文章目录 一 蓝牙简介 二 使用方法 2 1 接线 2 2 AT指令 三 蓝牙APP 四 实战项目 4 1 添加文件 4 2 配置需要传递的参数 4 3 获取返回值 4 4 发送光照强度 4 5 控制程序 4 6 手机端页面设计 4 6 1
  • python的学习心得与知识总结

    1 字符串格式化表达式 作用 生成一定格式的字符串 运算符 语法格式 格式字符串 参数值 或 格式字符串 参数值1 参数值2 参数值3 说明 左侧为格式格式字符串 右侧为参数值 当有多个参数值时用 括号 括起来 并用逗号 隔开 格式化字符串
  • 基于java的饮食分享平台系统毕业设计(源代码+数据库+部署文档+部署视频)

    摘要 本篇论文主要介绍了基于Java的饮食分享平台系统的设计与实现 通过对现有饮食分享平台的分析和用户需求的调研 本设计采用Java语言进行系统开和编码 首先分析了饮食分享平台的背景和相关知识 然后提出了系统的需求和设计方案 接着详细介绍了
  • 自定义解密注解

    在开发中 有时候会遇到前端body加密 后端解密操作 接下来用注解实现 1 新增DecodeRequestBodyAdvice类 package com xx advice import lombok extern slf4j Slf4j
  • 图卷积 节点分类_了解图卷积网络以进行节点分类

    图卷积 节点分类 Neural Networks have gained massive success in the last decade However early variants of Neural Networks could
  • 如何学习数学分析

    如何学习数学分析 数学分析的研究定位 一直以来都是书到用时方恨少 刚毕业那会学的是计算机 从事算法工程师岗位 然后基础人工智能算法 在遗传BP 神经网络 旅行商问题上接触了很多数学知识 到后来的机器人导航工程师又做了路径规划 设计到视觉SL
  • 1.pwn基础总结

    基本概念 exploit 用于攻击的脚本与方案 通常缩写为exp payload 攻击载荷 是的目标进程被劫持控制流的数据 shellcode 调用攻击目标的shell的代码 打开目标的shell 获取目标控制权 pwn解题基本流程 che
  • CBC字节翻转攻击解析

    CBC字节翻转攻击解析 一 分组密码的模式 分组密码的主要模式有5种 ECB模式 电子密码本模式 Electronic CodeBook mode CBC模式 密码分组链接模式 Cipher Block Chaining mode CFB模
  • 可重入锁-Reentrant

    Reentrant Re entrant 可重复进入 什么叫可重入 线程可以进入任何一个它已经拥有的锁所同步着的代码块 可重锁作用 防止死锁 常用的可重入锁 JDK ReentrantLock java util concurrent lo
  • 如何异步+队列实现接入阿里云事件监控

    阿里云监控服务可用于收集获取阿里云资源的监控指标或用户自定义的监控指标 探测服务可用性 以及针对指标设置警报 使您全面了解阿里云上的资源使用情况 业务的运行状况和健康度 并及时收到异常报警做出反应 保证应用程序顺畅运行 阿里云事件监控文档地
  • C_单链表去重

    include
  • ubuntu18.04安装mysql5.7

    ubuntu18 04安装mysql5 7 一 安装MySQL 1 安装mysql服务 2 检查状态 3 注意查看mysql版本使用 4 查看MySQL5 7默认账号和密码 二 配置MySQL 三 查mysql服务状态 四 修改root账户
  • uView在uniapp中样式完全失效问题

    最近开发微信小程序和钉钉小程序 使用uniapp UI库准备使用uView 但是按官网引入之后 在小程序模拟器上样式完全无效 而H5正常 解决方法 由于Hbuilderx版本问题 编译的代码中会多出一行样式 可以更换3 2 16版本 亲测有
  • SecureCRT创建串口连接

    鉴于没有在网上找到很好的图解SecureCRT创建串口连接方式 自己写一篇作为备忘录 同时 便于有同样需求的朋友可以快速方便的创建串口连接方式 一 工具 电脑 串口线和超级终端 本文选择SecureCRT 二 方法步骤 1 点击设备管理 查
  • Android EditText接收扫码枪输入,有时缺位,有时出现两次回车

    最近做Android项目时 需要使用外接扫码枪扫描条码 并且接收条码输入的EditText同时还要能接收商品名称的输入 在开发调试的过程中发现 使用扫码枪时会出现条码信息丢失 或者扫码输入过程中出现两次Enter的情况 问题1 扫码枪扫码后
  • JS逆向 - 破解oklink加密参数及加密数据

    版权声明 原创不易 本文禁止抄袭 转载 侵权必究 目录 一 JS逆向目标 会当临绝顶 二 JS逆向分析 不识庐山真面目 三 JS逆向测试 只缘身在此山中 四 JS反逆向 柳暗花明又一村 五 oklink逆向完整代码下载 六 作者Info 一
  • 微信小程序期末大作业-天使童装商城

    微信小程序期末大作业 天使童装商城 导入即可使用 有轮播图 底部导航 各种童装标签 有首页 分类 优惠券 购物车 个人中心五个导航 适合初学者学习使用 如下图所示 资源链接在末尾 资源下载链接 https download csdn net
  • 拉普拉斯噪声满足ε-差分隐私的定义

    差分隐私的定义如下 给定一个兄弟数据集D和D 他们两者之间至多相差一条数据 然后给定一个映射函数 f D R d f D rightarrow R d
  • 史上最全的WebSettings说明

    setAllowContentAccess boolean allow 是否允许在WebView中访问内容URL Content Url 默认允许 内容Url访问允许WebView从安装在系统中的内容提供者载入内容 setAllowFile
  • 前后端分离的vue项目如何合并?springboot 单体应用

    首先是有这么两个应用 前端是vue项目 后端是springboot 构建的服务端 现在是需求是 这个项目很轻量级 完全没必要部署为两个应用 因此需要重新合并 具体步骤如下 第一步 vue项目先打包 执行命令 npm run build 执行