vue项目idea前后端打包

最新推荐文章于 2025-04-23 20:43:10 发布
最新推荐文章于 2025-04-23 20:43:10 发布
阅读量3.1k 收藏 10
点赞数
文章标签： idea vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44780486/article/details/116452641
版权

1、点击maven–package
在这里插入图片描述
2、此时在项目目录中target中会生成对应war包，后端java代码打包结束，接下来是前端代码打包。在这里插入图片描述

3、右键web目录，弹出控制面板
在这里插入图片描述
4、 执行 npm run build
在这里插入图片描述
5、此时在web项目目录中生成dist文件，展开如下
在这里插入图片描述
6、将dist中的static和index放入到war包中
在这里插入图片描述

7、完成，部署在服务器即可。

嗎嗎
关注
基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇
天罡gg的专栏
03-07 2万+
如何高效学习Java? 毕业设计项目应该怎么做？入门实战项目应该怎么做？ 做Java开发都应该学习哪些框架技术？ 我想来跟你聊聊为什么要学习此专栏？我们经常说，看一个事儿千万不要直接陷入细节里，你应该先鸟瞰其全貌，这样能够帮助你从高维度理解问题。同样，当你迷茫想努力没有方向时，最事半功倍的方法是：找人带你! 因为过来人，更懂得如何学、如何做、如何少走弯路！ 那今天就给大家带来一门专栏课程，由 天罡gg 和 经海路大白狗 两位实力大牛合力打造的一款专栏，可以让你从0到1快速拥有企业级规范的项目实战经验！
Springboot+vue前后端分离项目一起打包
qq_72771289的博客
05-11 924
2.在Stringboot项目的resources下新建一个static文件夹将前端打包生成的dist文件放进去。5.最后在Maven中双击package就可以得到jar包了。3.在CorsConfig文件中加入代码。4.在pom文件中加入代码。1.先在前端页面使用。
如何使用小皮打包部署 SpringBoot+vue项目
2301_82110462的博客
03-07 947
控制台中输入“”后等待执行完毕 控制台无任何报错信息且左侧项目目录中生成dist文件夹表示前台项目打包成功（注：命令输入的文件位置为命令输入位置）dist。
项目打包（idea，vscode)
最新发布
weixin_63393915的博客
04-23 401
我们再打包的过程中可能会遇到各种各样的问题，我是通过AI进行解决的。这里我就不推荐什么软件了。具体做法就是，把报错的内容截成一张图片发给AI，让他帮我们纠错。直至纠错成功位置，要有耐心，一般都会成功。红色字体部分是我对项目进行打包成功的方法。命令打包，生成的 Jar 包在。在 IDEA 中，可通过右侧。在 VSCode 终端输入。
vue项目Intellij IDEA上前端打包
热门推荐
12-16 1万+
Intellij IDEA搭建vue-cli项目，VUE前后端分离项目的打包、发布，vue项目开发环境搭建
idea编译打包前端vue项目
aa1382525的专栏
01-22 2760
这个很好理解 因为我是Windows的环境是执行不了shell脚本的，可能别人开发的时候用的mac电脑；后续我也找了很多变通的方法试图能在编译的时候能用直接用这个shell脚本，比如搜索"idea 运行 shell脚本"这样的关键字 大概会让你装bashsupport插件（只支持老版本的idea 新版本的idea只能用bashsupport pro但是是收费的，目前也没有可替代的其他插件） 或者在设置Tools>terminal的Shell path为 git bash的路径。
IDEA打包VUE项目
weixin_52116015的博客
04-18 3050
idea打包vue项目 tomcat配置静态资源访问
使用IDEA后端java代码打包为jar，使用Nginx打包前端Vue
qq_62015542的博客
01-17 3616
使用IDEA后端java代码打包为jar，使用Nginx打包前端Vue
IDEA打包vue工程
qq_52674099的博客
05-15 1436
7.右键,open in Explorer,外部文件夹访问就可以找到dist的存放位置啦 (> , <)!3.在Terminal中键入 npm run build。2.右键，open in Terminal。1.找到package.json文件。6. 出现dist包。
VUE前后端分离项目的打包、发布
u012369752的专栏
04-20 1897
一、用IDEA打包vue项目 HD_CSPWH_CiTOS\cspwh-citos-isp-client文件中作如下修改： 1.build/utils.js修改为： if (options.extract) { //loaders.push(MiniCssExtractPlugin.loader) loaders.push({ loader: MiniCssExtractPlugin.loader, options: {publicPath:'
若依前后端分离项目部署文档（完整版）
04-07
### 若依前后端分离项目部署指南 #### 一、部署Linux + Nginx ##### 部署后台代码 **1.1 生成JAR包** 对于基于IDEA的开发者而言，可以通过在集成开发环境的Terminal中执行`mvn clean package`命令来生成项目的...
IDEA打包应用程序的教程图解
08-18
主要介绍了IDEA打包应用程序的教程，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
idea打包项目
12-25
把idea的springboot项目生产war包、springboot项目导出war包
使用IDEa运行前端VUE-admin,和打包发布
这里没有简介
05-12 2246
这里以 https://gitee.com/y_project/RuoYi-Vue 一个前后端分离项目为演示 在拉取项目的时候,本机必须安装node.js IDEa再安装一个VUE插件, 拉取代码 运行该前端, 在这个过程中会自动提示你缺失什么,按照提示确认即可,过一会前端就运行起来了, 同时想要打包发布到服务器上面,点击4 处的▶ 按钮即可,将在package.json同级别目录下生成一个dist目录,该目录下即为前端代码,放到服务器相关工作目录即可 同时,想要修改开发时前端运行
使用IntelliJ IDEA打包项目jar包或者war包
qq_60782107的博客
03-15 3331
1. jar包：jar包是类的归档文件，与平台无关的文件格式，它允许将许多文件组合成一个压缩文件。JAR 文件格式以流行的 ZIP 文件格式为基础。但与 ZIP 文件不同的是，JAR 文件不仅用于压缩和发布，而且还用于部署和封装库、组件和插件程序，并可被像编译器和 JVM 这样的工具直接使用；简单来说，jar包就是别人已经写好的一些类，然后对这些类进行打包。可以将这些jar包引入到你的项目中，可以直接使用这些jar包中的类和属性，这些jar包一般放在BOOT-INF文件夹的lib目录下。
创建的vue项目--打包
醉殇姒若梦遗年 ツ的博客
01-30 2942
自创建的项目（未使用项目框架），使用weabpack打包，若出现空白页；若加载图片（img标签）成功，加载背景图片（css中）和字体文件失败。
Vue的静态资源打包问题
实践求真知
09-12 784
一问题 通过v-for循环，无法看到页面图片。 <template> <div v-for="img in imgs"> <img width="100%" height="100%" ;src="img"> </div> </template> <script> export default { name:"Home.vue", data(){ return ...
Vue + SpringBoot 前后端分离项目用Maven自动打包合并为单体项目
Ying的博客
05-24 3373
Vue + SpringBoot 前后端分离项目用Maven自动打包合并为单体项目
使用 Idea 运行打包已有的 vue 项目 新手教程！
wangjw.bug
11-09 3098
使用 Idea 运行打包已有的 vue 项目 新手教程！
springboot vue前后端分离IDEA
03-18
### 配置 IntelliJ IDEA 进行 Spring Boot 和 Vue 的前后端分离开发 #### 1. 环境准备 为了在 IntelliJ IDEA 中进行 Spring Boot 和 Vue 的前后端分离开发，需要先准备好必要的环境。这包括安装并配置 Java JDK、Node.js、npm 或 yarn 以及 IDE 工具。 - **Java JDK**: 确保已安装最新版本的 JDK 并设置好 `JAVA_HOME` 环境变量[^1]。 - **Node.js 和 npm/yarn**: Vue 前端项目依赖于 Node.js 来运行脚本和管理依赖项。可以通过官网下载并安装最新的稳定版 Node.js，同时确保全局安装了 npm 或 yarn[^4]。 #### 2. 创建 Spring Boot 后端项目 使用 IntelliJ IDEA 创建一个新的 Spring Boot 项目： - 打开 IntelliJ IDEA，选择 “New Project”，然后选择 “Spring Initializr”。 - 设置 Maven 构建工具，并勾选所需的 Starter Dependencies（如 Web, DevTools 等）[^2]。 - 完成创建后，在项目的 `application.properties` 文件中定义跨域访问策略以便前端能正常调用 API 接口[^3]。 ```properties spring.mvc.cors.enabled=true management.endpoints.web.exposure.include=* ``` #### 3. 初始化 Vue 前端项目 通过命令行初始化 Vue 项目并将它集成到整个解决方案中： - 使用 Vue CLI 脚手架快速生成基础结构： ```bash vue create frontend-project-name ``` - 将此目录放置在同一工作空间下或者作为子模块引入 Git 版本控制系统。 #### 4. 配置代理解决 CORS 问题 由于前后端分离架构通常会遇到跨源资源共享 (CORS) 限制，因此可以在 Vue 开发服务器上配置反向代理来模拟生产环境中统一域名下的请求转发行为。 编辑 `vue.config.js` 添加如下内容: ```javascript module.exports = { devServer: { proxy: 'http://localhost:8080' // 替换为实际 springboot api 地址 } }; ``` #### 5. 整合与部署 完成上述步骤之后就可以分别启动两个服务来进行联调测试了。对于正式上线，则需考虑将打包后的静态资源上传至 Nginx 或其他 HTTP Server 上供客户端加载；而后台接口继续由 Tomcat 提供支持。 ```python if __name__ == '__main__': app.run(host='0.0.0.0', port=8080) ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值