Vue2.9.6 cli项目部署到springboot静态文件夹

最新推荐文章于 2023-09-17 14:59:33 发布
最新推荐文章于 2023-09-17 14:59:33 发布
阅读量617 收藏 3
点赞数 1
文章标签： spring boot intellij-idea java vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YMY_666/article/details/121518824
版权

首先在项目根目录npm run build打成dist包
![在这里插入图片描述](https://img-blog.csdnimg.cn/6cc9d27bfcba4565842446a26811abd0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAWU1ZXzY2Ng==,size_19,color_FFFFFF,t_70,g_se,x_1
在这里插入图片描述

然后将dist包下的index.html,js,css,fonts复制到springboot的static文件夹下,不要包含static
在这里插入图片描述

也可直接设置打包到springboot静态static下 在这里插入图片描述

然后使用IDEA的eclipse快捷键ctrl+alt+L格式化代码，将css和js的路径修改为相对路径

如果你使用了element-ui,还需要再修改css引用字体的路径为相对路径 在这里插入图片描述

然后启动springboot项目输入‘http://域名:端口/index.html’就可以正常访问了，页面也可以正常调用后端接口

谢谢大家观看，如果发现博文有问题，多谢各位指点一二，如果有不懂的可以加QQ问我3152524195。

YMY_666
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Springboot项目与vue项目整合打包的实现方式
08-25
在这个方法中，我们可以将前端Vue项目的构建输出复制到Springboot项目的resources/static下，然后在application中跑起来boot项目，这样直接访问index.html就可以访问到页面。操作步骤如下： 1. 前端Vue项目使用命令...
vue+springboot最佳项目实践源码
03-28
Vue.js项目可能包含`src`目录，里面包括`components`（存放可复用组件）、`views`（视图组件）、`router`（路由配置）、`store`（Vuex状态管理）等文件夹。而Spring Boot项目则可能有`src/main/java`（业务逻辑代码...
vue项目打包到spring boot下运行
jiangren_IT的博客
02-21 3835
本文章重要是解决vue项目打包到spring boot项目运行问题 核心主要是将vue生成的dist文件加重的static和index.html文件放到spring boot的resource下运行，可能会出现的问题以及解决办法，至于如何生成dist，请自行百度。<此文章是为了解决上述运行方式使用，vue+spring boot的特殊要求，尽量不要使用此办法集成。> 问题一：有的需求为...
前后端整合vue+springBoot+gateway。解决vue打包之后放到springBoot的static文件夹无法访问，gateway转发静态资源文件的失败的问题
xal
09-19 2003
当然不会，它那么多模块它怎么会知道访问哪个的static，这个时候我们就需要使用gateway的断言指定一个模块的static是作为静态文件夹。如果是vue打包文件，因为打包生成的是index.html,我们知道index文件是可以省略不写的，那么他的访问路径就是 http://localhost:8080。如下方结构：我们想访问a.txt文件，假设启动端口为8080，那么访问路径就是 http://localhost:8080/a.txt。我们只需要作为静态资源文件的模块，注意一定要是这个模块。
Vue项目部署到SpringBoot工程下
热门推荐
dongzhensong的博客
05-26 2万+
目录1.修改编译设置2. 编译3. 部署 首先, 从前后端分离的角度来说, 不建议将编译后的vue工程放到SpringBoot工程目录下,部署到Tomcat, 因为这有点违背前后端分离的设计. 建议将其部署到Nginx下. 即后端工程与前端工程分开部署. 1.修改编译设置 找到vue工程的 config/prod.env.js 文件(如果没有该文件可不处理), 修改 BASE_API 为正式环...
Spring + vue 项目部署(全网最详细教程_含内网穿透部署)
最新发布
你长的真帅大佬，不妨动动小手点赞加关注
09-17 4844
本项目以Springboot 2.7.11和vue2做参考示例本项目以Springboot 2.7.11和vue2做参考示例展示前后端代码的成品前端Vue后端Java项目写完后，差不多就是这个样子，仅供参考！前端打包的方式有以下几种：方法1:#直接打包，简单明了，这个会在你的项目里面出现一个dist的打包文件方法2：#选择打包路径，可以指定你打包的路径方法3：#使用IDEA开发工具进行打包后端打包安装成功后就会多出以下目录这个就是后端打包的jar包。
【SpringBoot+Vue】构建前端项目
weixin_46947972的博客
07-18 144
这里的Vueproject是文件夹，vuefirst是项目名称，回车之后，默认的回车下去，比如这里问你的项目名称是不是，我这里正在使用，就截图了其他博Z的图片。这里还会问是否安装 vue-router，一定要选是，也就是回车或按 Y，vue-router 是我们构建单页面应用的关键。项目构建成功，这一步如果报错，可能是未能加载项目所需的依赖包，即 node_modules 里的内容，需要在该文件夹执行。首先，进入到我们的工作文件夹中，在 D 盘新建了一个叫vueproject 的文件夹。
vue-cli3访问public文件夹静态资源报错的解决方式
10-14
主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解
09-14
【SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解】 在现代Web开发中，SpringBoot和Vue.js是两个非常流行的框架，分别用于后端和前端开发。本教程将详细讲解如何将一个使用SpringBoot作为后端、Vue.js作为...
前后端分离（VUE+SPRINGBOOT）三
shrek11的专栏
10-24 388
下面我们来看一下前端的目录结构 1、build文件夹是保存一些webpack的初始化配置。config文件夹保存一些项目初始化的配置。 2、node_modules是npm加载的项目依赖的模块。 3、src目录是我们要开发的目录，打开是这样的： 4、static文件夹用来放置静态资源目录 5、index.html是首页入口文件 6、package.json是项目配置文件 而我们主要开发的S...
vue3项目打包后整合到springboot项目中运行
m0_63040701的博客
06-08 5064
resources下面创建static和templates两个文件夹，分别存放静态文件和动态页面。连个文件夹中都创建back和front文件，一个是前台，一个是后台。index.html放在templates中back。修改index.html中引入资源的文置，如下。我采用手动搭建springboot项目的方式。启动开发服务器（项目目录）springboot项目。static中back。
将Vue项目打包并部署到Spring Boot项目中？
weixin_42611177的博客
01-13 2714
为了将Vue项目打包并部署到Spring Boot项目中，你需要进行以下步骤： 在Vue项目中使用npm run build命令打包项目。 将打包出来的dist文件夹中的内容复制到Spring Boot项目的resources/static文件夹中。 修改Spring Boot项目的配置文件，使得它能够读取静态文件。 启动Spring Boot项目，并在浏览器中访问即可。 ...
Vue-cli（2.9.6）快速构建一个 Vue 项目
从事厨房信息化行业，万能对接所有点餐系统，kds，智能控菜，酒店协调软件
09-22 2310
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。原文链接：https://blog.csdn.net/guangwenyin/article/details/123462007。一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router。webpack官网：https://webpack.docschina.org/Vue.js官网：https://cn.vuejs.org/
SpringBoot访问静态资源和jar外部静态资源，部署前端打包后的vue项目放入静态资源里
蚂蚁舞
04-19 6418
记录一下使用SpringBoot访问静态资源和SpringBoot打包之后的jar外部静态资源，部署前端打包后的vue项目放入静态资源里。
vue 发布到springboot的步骤
走错路的程序员
01-04 1576
时间 2020年1月,应该是使用了最新的spring boot, 和vue使用的是vue/cli@3 0.打包前要配置vue中静态资源的文件路径. vue.config.js中. module.exports = { publicPath: '/static/', // 这个指向的地址就是打包后,html文件引用js文件的路径地址. } 这个指向的地址就是打包后,html文件引用js文件的路径地址. 如下示例, <link href=/static/js/chunk-2d0aa22f.a9
前后端分离开发，前端打包后放springboot的static文件夹部署
keller的博客
06-29 6644
今天，小编在公司部署项目，要求前后端部署在一起，前端开发完后将前端代码打包后放到springboot的static目录下；然后打成镜像，k8s部署；前端项目执行npm run build命令，文件会打包到dist文件夹下；后端项目 在项目的resource目录下，创建static文件夹，如下所示： 将前端打包后的dist下的所有文件，全部拷贝到static文件夹下；通过这样部署后，相当于前后端作为一个整体部署到了tomcat当中，所以前后端使用同一个端口；启动springboot工程，然后访问localh
vue 2.9 创建第一个vue项目（包括 vscode工具 针对vue的配置 ）
superKM的博客
03-13 6722
前期准备 vue 2.9的配置：http://blog.csdn.net/superkm/article/details/79533783 需要准备的环境和工具都准备好，接下来就开始使用vue-cli来构建项目。   在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录：①cd 目录路径  ②如果以安装git的，在相关目录右键选择Git Bash Here 打开命令终端，通过web...
Vue-cli2.9.6版搭建详解
caipital的博客
09-15 4741
使用vue webpack 模板搭建项目步骤： 用cmd gitbash vsCode的终端等命令行工具都可以开始安装。。。如果电脑有安装cnpm，以下操作中的npm都可用cnpm替代。 1. 安装 node.js(npm)，因为会用到npm包管理工具下载项目依赖等 2. 安装 webpack: npm install webpack -g 3. 安装 vue-cli： npm install vue-cli –g 4. 通过vue-cli，初始化vue项目： vue init webpack projec
vue-cli4 部署到服务器 其他目录下
09-09
将Vue CLI 4项目部署到服务器的其他目录下，可以按照以下步骤进行操作： 1. 首先，确保服务器已经安装了Node.js和npm。 2. 在本地开发环境中，使用Vue CLI 4创建一个新的Vue项目。可以通过在终端中运行以下命令来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值