vue打包整合到spring boot一记

2023-05-16

目录

  • 背景
  • vue-cli打包之前的配置
  • 总结

背景

前段时间,根据需求,要将项目烧入到芯片,但我的擅长之处就是前后端分离开发,因此需要前端vue开发好,打包放到后端里面一起执行。那时候碰到好多貌似不可逾越的坑,今天终于可以抽出点时间,记录一下过程笔记。

vue-cli打包之前的配置

脚手架创建会生成如下的目录:
在这里插入图片描述

  1. 首先我们先把vue路由里的#去掉

只需在router里面加如下代码:

const router = new VueRouter({
  mode: "history",//去#
  ......
})
  1. 配置build文件夹下的index.js
build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../static/public/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../static/public'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/后端的context-path值/public/',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: 'source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
  1. 执行npm run build打包
    生成的包在项目根目录里的static文件夹下,直接把它拷贝到spring boot后台如下图即可
    在这里插入图片描述
  2. 启动后台并浏览器访问
    启动后台后,在浏览器里输入http://ip:端口号/项目名/static/public/index.html/index,如此大功告成。

总结

主要时build模块那里配置跟boot的指定的文件一致的,就可以访问到,有时候你会发现访问不到html,那是因为被boot拦截了。还有就是vue接口跨域的问题,最后交由后端来处理,尽量的使用prodEnv里面的变量。

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

vue打包整合到spring boot一记 的相关文章

随机推荐

  • C语言strstr函数

    函数strstr定义 xff1a char strstr const char str1 const char str2 xff1b 位于头文件 string h 中 作用 xff1a strstr函数用于判断字符串str2是否为字符串st
  • Linux下串口读写通信

    span class token keyword int span fd span class token operator 61 span span class token number 0 span span class token p
  • kubernetes最新版安装单机版v1.21.5

    kubernetes最新版安装单机版v1 21 5 k8s集群由Master节点和Node xff08 Worker xff09 节点组成 今天我在这里给大家只用1台机器 xff0c 安装kubernetes 1 安装前置环境 root 6
  • 双系统、多系统快速切换

    前言 装双系统甚至多系统 xff0c 是为了满足不同需求 每个操作系统都有自身的特点 xff0c 因为这样那样的原因 xff0c 很多人选择双系统 双系统满足了不同需求 xff0c 但是每次需要手动选择所要进入的系统 xff0c 切换系统也
  • ROS::CmakeList 例子

    ROS CmakeList 例子 span class token function cmake minimum required span span class token punctuation span VERSION span cl
  • ROS:静态TF发布

    ROS xff1a 静态TF发布 方式1 xff1a span class token tag span class token tag span class token punctuation lt span launch span sp
  • ROS::线程锁

    ROS xff1a xff1a 线程锁 boost span class token operator span mutex mutex span class token punctuation span span class token
  • 无人机智能飞行类库设计构思

    搭建无人机 智能飞行类库的主要目的就在于 xff1a 便于无人机路径规划各种算法的实施 xff0c 便于飞行仿真以及便于今后在硬件上实现算法 完整做到这些需要做三方面做工作 xff1a 一 计算几何 计算几何问题主要用于路径优化 避障等 x
  • STL教程:C++ STL快速入门

    目录 1 STL引言 2 STL是什么 xff08 STL简介 xff09 3 STL历史 4 STL组件 5 STL基本结构 6 STL 使用方法 7 STL目录 网址 xff1a STL教程 xff1a C 43 43 STL快速入门
  • vue使用sortablejs插件的时候报Sortable: `el` must be an HTMLElement

    最近因为项目需要很灵活自定义查询 xff0c 故使用了vue和element ui组件库 xff0c 其中el table需要行和列拖拽排序 故使用到了sortable插件 一 报错的排查 首先对 xff1a const tbody 61
  • 记一次Linux 4.15.0-65-generic安装Elasticsearch成功的过程

    一 xff0c 操作系统和安装的应用 xff1a 1 操作系统 xff1a Linux version 4 15 0 65 generic buildd 64 lgw01 amd64 006 gcc version 7 4 0 Ubuntu
  • [docker]笔记-镜像 管理

    1 镜像管理 docker search xxxx 查找镜像 例如查找httpd root 64 localhost docker search httpd 下载镜像 docker pull xxxx root 64 localhost d
  • quill-editor扩展的正确姿势

    一 无关的插曲 曾几何时 xff0c 风云万里 xff0c 万海桑田 耕耘于代码堆里多年 做过android移动端 xff0c 做过web端 xff0c 做过java后端和 net xff0c 也做过python数据分析 但真正扩展源码的亦
  • 导入excel时js转换时间的正确姿势

    一 基础 1 excel的日期是以1900 1 0开始计算的 xff0c 既1900 1 1就是1天 xff1b 2 js的Date是以 1970 1 1 08 00 00 开始的 xff1b excel时间换算如下 xff1a 点击常规后
  • springboot下ClassUtils.getDefaultClassLoader().getResource(“static“).getPath() 空指针异常???

    在static加个文件文件就ok xff0c 不信你看看
  • Compilation failure: Compilation failure

    有a项目和b项目 xff0c 如果a项目打包成功 xff0c b依赖a 现b打包的时候报Compilation failure Compilation failure了 xff0c 原因是a中有 span class token opera
  • mysql数据更新时变更时间自动更新

    ALTER TABLE test CHANGE startTime startTime timestamp NOT NULL ON UPDATE CURRENT TIMESTAMP DEFAULT CURRENT TIMESTAMP
  • docker、docker-compose和Portainer的安装

    一 docker安装 span class token comment 安装docker相关依赖 span yum span class token function install span y yum utils device mapp
  • vue-cli+spring boot前后端分离跨域及session丢失解决办法

    前后端分离跨域笔记 小小的唠叨前端代码后端 小小的唠叨 曾几何时 xff0c 项目开发时间很紧 xff0c 项目组很多的人即不懂vue也不大懂spring boot及mybatic的强大之处 xff0c 也没有做过前后端分离 xff0c 项
  • vue打包整合到spring boot一记

    目录 背景vue cli打包之前的配置总结 背景 前段时间 xff0c 根据需求 xff0c 要将项目烧入到芯片 xff0c 但我的擅长之处就是前后端分离开发 xff0c 因此需要前端vue开发好 xff0c 打包放到后端里面一起执行 那时