前后端分离项目打包部署

最新推荐文章于 2024-04-10 10:48:41 发布
最新推荐文章于 2024-04-10 10:48:41 发布
阅读量8k 收藏 51
点赞数 8
文章标签： java maven spring intellij-idea vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Glinde/article/details/121523496
版权
本文详细介绍了Vue+SpringBoot的前后端分离项目如何打包部署到Linux服务器，包括前端Vue项目的npm run build打包，后端SpringBoot项目war和jar的打包方式，以及如何配置Nginx部署前端页面，最后讲解了在服务器上部署后端jar和war包的步骤。
摘要由CSDN通过智能技术生成

前后端分离项目打包部署

这里是一个Vue+SpringBoot的前后端分离项目

 

以下是将其打包部署到Linux服务器上的步骤

1.前端打包

在打包之前需要在vue.config.js(如果没有就新建一个)中添加以下代码

module.exports = {
    publicPath : "./"
}

注意检查axios的请求路径是否符合生产环境

 

在命令行中使用npm run build 进行打包

 

tip : 在idea中可以直接使用命令行

出现以下文字说明打包已经完成

 

此时在前端项目的项目根目录中会出现一个dist文件夹

最低0.47元/天 解锁文章
「已注销」
关注
  • 8
    点赞
  • 踩
  • 51
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue前后端分离项目，打包部署到阿里云服务器。
Self_discipline8的博客
02-19 4893
提醒：这里默认你已经配置好阿里云，例如开放安全组的端口号，宝塔面板中也要开放，配置了nginx；并且安装有mysql数据库，redis,nginx等必备的软件。 第一，打包前端代码，在终端使用命令行方式打包。 ①选择需要打包的前端文件，右键 ②在终端处，输入命令：npm run build:prod。如下图 ③出现dist文件，证明打包成功。 第二、打包后端代码，使用maven的package工具打包admin代码即可。 ①选择maven工具 ②点击package打包后端代码 ③打包成功 第三，上
打包部署若依(RuoYi)SpringBoot后端和Vue前端图文教程
最新发布
gi0066的博客
06-22 1987
到此这篇关于打包部署若依(RuoYi)SpringBoot后端和Vue前端的文章就介绍到这了,更多相关打包部署若依SpringBoot和Vue内容请关注我！
ruoyi-vue前后端分离项目实现一体化打包（前后端合并打包)
qq_37120477的博客
07-13 3089
转载自: https://blog.csdn.net/weixin_43860634/article/details/131401678说明: 该文章是我对链接中的操作步作坐的一些补充。
前后端分离项目打包
柯基的博客
10-24 1426
前端打包： （1）场景：vue，element； （2）在前端的终端处运行 npm run build (3) 打包完成后会在项目目录下生成“dist”文件。将其中的“static"文件和“index.html”放入后端目录的resources目录下。 后端打包： （1）场景：spring boot （2）在本栏目中的https://blog.csdn.net/qq_51009027/article/details/120839779 前提下将后端配置文件中的spring.datasource.ur.
关于前后端分离的项目打包方案docker
c1719561053的博客
09-05 1078
关于前后端项目的打包部署
【前后端分离项目部署】关于“vue3+SpringBoot+阿里云服务器+宝塔操作”的打包部署全流程配置
m0_60935824的博客
10-19 1603
npm run 命令dist。
vue3+springboot前后端分离项目打包教程，附带一些问题的解决
weixin_72949205的博客
02-16 1806
vue3+springboot前后端分离项目打包教程，附带一些问题的解决
若依前后端分离项目部署文档（完整版）
04-07
### 若依前后端分离项目部署指南 #### 一、部署Linux + Nginx ##### 部署后台代码 **1.1 生成JAR包** 对于基于IDEA的开发者而言，可以通过在集成开发环境的Terminal中执行`mvn clean package`命令来生成项目的...
JAVA著名免费框架若依前后端分离项目详细部署文档
08-21
《JAVA著名免费框架若依前后端分离项目详细部署文档》 若依框架是一款全面开源的快速开发平台，致力于提供高效便捷的开发体验。其特点包括前端采用Vue.js和Element UI，后端则基于Spring Boot、Spring Security、...
若依前后端分离项目部署文档.docx
09-09
在IT行业中，前后端分离项目的部署是一项至关重要的任务，它涉及到服务器配置、应用打包、代理设置等多个环节。本文档详细介绍了两种不同的部署方案，一种是在Linux服务器上部署SpringBoot+Vue项目，结合Nginx和...
部署vue+Springboot前后端分离项目的步骤实现
10-15
本文将详细介绍如何部署一个Vue+SpringBoot的前后端分离项目。 首先，我们从单页应用（SPA）的概念开始。SPA是指在浏览器加载初始HTML页面后，所有后续交互都通过Ajax或其他异步技术进行，无需重新加载整个页面。...
Nginx代理同域名前后端分离项目的完整步骤
01-08
通过域名后的 url 前缀来区别前后端项目。 以 vue + php 项目为例。直接上 server 模块的 nginx 配置。 server { listen 80; #listen [::]:80 default_server ipv6only=on; server_name demo.com; # 配置项目...
最细致的Spring Boot结合Vue前后端分离项目打包部署步骤（搭配Nginx）
DT辰白
07-05 3763
文章目录前言一、环境准备二、SpringBoot项目打jar包1.1 使用Maven的package插件打包1.2 上传至Linux服务器三、Vue项目打包1.1 修改后台请求地址1.2 生成dist文件1.3 上传至linux服务器三、配置Nginx四、启动项目1.1 启动Nginx服务器1.2 启动SpringBoot1.3 访问项目总结 前言 Java企业开发少不了Spring Boot 加 Vue，在如今大街小巷都遍布的前后端分离项目标配，已经成为公司开发必不可少的技术，最近小编开源了一个关于RB
前后端分离项目的打包部署
qq_42748363的博客
06-19 7075
SpringBoot + Vue项目部署到指定服务器上。 1.打包部署后端项目 1.1.设置打包类型 在pom.xml文件中设置打包类型 1.2.打成jar包 打包后生成target文件夹，用于存放打包后的文件，其中就包含打成的jar包。 1.4.利用xshell访问服务器 ①.连接到服务器； ②.进入存放jar包的目录中； ③.查看文件夹内容（此时我们还未传打好的jar服务器上） 1.5.上传本地jar包到服务器上 进入jar所在的target文件夹，cmd scp jar包在本地的路径 用户名
Spring Boot + Vue 前后端分离项目，Maven 自动打包整合
qq_67042329的博客
07-22 1612
现在各类项目为了降低项目、服务模块间的高度耦合性，提出了“”，而前后端分离的项目该如何打包呢？一般的做法是前端项目打包完，将打包文件手动复制到后端项目工程的src\main\resources\static目录下，再进行后端工程项目打包，这样手动来回复制、多次打包总是让人觉得麻烦。（即使采用Jenkins打包部署，也会存在上面2次打包过程）为了解决上述问题，我特意查询了Mavenbuild的相关配置及插件，发现解决上述问题，通过Maven自动打包整合其实不难，在此与大家进行分享。...
Springboot+Vue前后端分离项目打包并部署到服务器
多味花生的博客
10-12 7507
一、打包前端项目 打开前端项目，使用npm run build命令进行打包，打包成功后结果如下 这时，该项目目录下有一个build目录是打包好的文件 将该目录下的所有文件复制到后端Springboot项目的resources/static目录下 二、打包后端项目 在右侧的maven视图中点击clean，然后点击install，对后端项目进行打包 打包好后再target目录下会有一个jar包 三、部署 复制jar包到指定目录，打开cmd命令行界面，进入到该目录，使用java -
前后端分离项目的部署
Yi_xy的博客
04-17 1129
nohup: 忽略输入并把输出追加到"nohup.out，这个意思是说启动项目日志在jar包同级目录nohup.out文件内（执行上面的启动命令，它会自动给你创建一个nohup.out文件），可以通过vi nohup.out 看到日志。找到nginx的安装目录下的 conf/nginx.conf文件(默认的位置是：/usr/local/nginx/conf 下的nginx.conf)，配置成以下即可。打包方式也很简单，只要在终端中执行：npm run build命令即可，如下图。5.启动后端的jar包。
后台管理系统打包
m0_62351775的博客
02-17 593
把main.js文件删除 建两个文件main-prod.js、main-dev.js main-pros.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import '@/assets/reset.css' import TreeTable from 'vue-table-with-tree-grid' Vue.component('
SpringBoot前后端分离项目，打包、部署到服务器详细图文流程_springboot前后端分离项目怎么部署
2401_84183033的博客
04-10 5111
最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！
前后端分离项目打包出来
05-11
前后端分离项目打包出来通常需要分别打包前端和后端部分，然后将它们合并在一起。...需要注意的是，前后端分离项目的打包和部署过程可能因为使用的技术栈不同而有所差异，具体实现方法需要根据实际情况进行调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值