前后端分离Vue + ElementUI项目打包部署到云服务器

最新推荐文章于 2025-10-16 15:44:28 发布
原创 最新推荐文章于 2025-10-16 15:44:28 发布 · 1.6k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #java #tomcat

本文详细介绍了一个前端项目的部署流程，包括如何使用npm run build命令生成dist文件夹，如何修改index.html中的静态资源引用路径，以及如何在云服务器上创建并部署项目文件。同时，简要介绍了后端项目的部署方法。

首先项目中啥config都不要改直接npm run build然后项目中就会多一个dist
在这里插入图片描述
static是所有静态资源
打包好后将index.html打开修改一下，把所有你引用的静态资源全都改一下以: ./开头
在这里插入图片描述
在你的云服务器上创建一个你想要的文件夹我就以charts命名：
在这里插入图片描述
charts里放入刚刚dist里的文件即可
在这里插入图片描述
这时前端部分就部署完了
前后端分离，后台的部署就简单说一下：
用maven生命周期的package方法打包的jar包在服务器上挂载运行即可
nohup java -jar xxx.jar &

Element-Ui和Vue项目的结合 实现前后台分离
qq_44424498的博客
11-05 1095
Element-Ui和Vue项目的结合 第一步：使用脚手架创建一个Vue项目 vue init webpack 项目名 创建在线项目 vue init webpack 项目名 创建离线项目 第二步：在项目中下载element-ui的模板 cd pro01 cd 项目名 npm install element-ui -S ...
SpringBoot+Vue+Element-ui实现前后端分离
m0_66403070的博客
04-23 2373
SpringBoot+Vue+Element-ui实现前后端分离
前后端分离项目部署服务器,前后端分离项目部署到云服务器
weixin_35843096的博客
08-11 1366
前后端分离项目部署到云服务器 内容精选换一换为了避免不必要的费用产生，完成本示例体验后，可释放以下资源。资源释放后无法恢复，请谨慎操作。项目是使用DevCloud各服务的基础，删除项目可将该项目中所有数据(包括工作项、文档、代码仓库、软件包、构建/部署任务等)一并删除。购买弹性云服务器时，需配置弹性IP及云硬盘。删除弹性云服务器时，要同时选择将弹性IP及挂载的硬盘删除。为了避免不必要的费用产生，完...
在服务器部署若依前后端分离项目
最新发布
mars144的博客
10-16 467
目录结构/需要配置的后端文件。
在腾讯云上部署vue前后端分离项目
CoderAxiba的博客
02-17 2019
1、购买云服务器 我使用的腾讯云，通过学生身份认证白嫖了15天的试用。。。 操作系统为Linux的cent OS7 关于如何购买并配置云服务器，可以参照此篇官方文档 快速配置 Linux 云服务器 2、配置云服务器的环境 我的本地项目用到了node，mysql数据库，所以就要在云服务器上也把这些环境给配置好，首先是配置node环境： 1、执行以下命令，下载 Node.js Linux 64位二进制...
springboot+vue+ElementUi项目实例，部署到云服务器上
weixin_45573378的博客
06-19 1115
项目地址：https://e.coding.net/dabfdebfhui/springbootvue.git SpringBoot（端口号：8081） 1.导入mysql数据库 2.代码生成器生成实体类与Mapper文件 3.搭建springBoot+mybatis+Swagger项目 创建项目过程中开始可以不选，进入项目后在pom.xml文件中添加 Vue（端口号：8080） 1.使用Vue cli脚手架创建Vue项目 1.下载node.js 2.切换npm源为天猫 3.全局安装vue-cli npm
精选资源
SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解
01-09
给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的，我用的 Linux 发行版是 CentOS7.5 有了一个基于 ElementUI 的电商后台管理系统，在开发一个相似的后台就会轻松很多。不过前面的系统的后端是使用 ...
带大四小白一起做前后端分离的毕设管理系统，技术栈SpringBoot + Vue + ElementUI.zip
02-22
这是一个基于前后端分离架构的毕业设计管理系统项目，主要采用了SpringBoot作为后端开发框架，Vue.js作为前端框架，以及ElementUI作为前端UI组件库。这个项目对于大四学生或者初学者来说，是一个很好的实践平台，...
【项目实战】手把手教你搭建前后端分离项目 SpringBoot + Vue + Element UI + Mysql
激流丶的博客
07-08 4631
🍉🍉🍉 程序员必须得学会如何搭建一个项目，会了这个技能有很多好处，例如接一些项目，也能挣一点生活费。
纯手工搭建Springboot+vue+elementUI框架
04-26
接下来，我们要将Spring Boot和Vue.js结合起来，实现前后端分离。这通常涉及以下几个步骤： 1. 创建Spring Boot RESTful API：定义Controller层，处理HTTP请求，提供JSON格式的数据。 2. 配置跨域访问：由于前端和...
悟空CRM java版(基于jfinal+vue+ElementUI的前后端分离CRM系统)
m0_67698950的博客
06-06 955
CRM9.0（JAVA版） 软件长期为企业提供企业管理软件(CRM/HRM/OA/ERP等)的研发、实施、营销、咨询、培训、服务于一体的信息化服务。悟空软件以高科技为起点，以技术为核心、以完善的售后服务为后盾，秉承稳固与发展、求实与创新的精神，已为国内外上千家企业提供服务。的发展受益于开源，也会回馈于开源。2019年，悟空CRM会继续秉承“拥抱开放、合作共赢、创造价值”的理念，在开源的道路上继续砥砺前行，和更多的社区开发者一起为国内外开源做出积极贡献CRM采用全新的前后端分离模式，本仓库代码中已集成前端vu
部署Vue项目到阿里云服务器（Apache环境）+ 本次项目总结
cungudafa的博客
08-30 7986
目录序正文1. Vue 连接远程服务器1.1 修改axios配置1.2 远程连接测试2. 打包Vue项目2.1 修改打包配置（重要）2.2 打包项目2.3 解决Element UI图标不显示问题3. 部署Vue项目4. cungudafa的项目总结4.1 第一个Vue-Springboot前后端分离demo4.2 本次项目快速链接 序 【前言】 前面一文，详细讲述后端如何部署到阿里云服务器上：部...
Vue+ElementUI项目打包部署到Ubuntu服务器中
番茄Salad
10-26 1294
【代码】Vue+ElementUI项目打包部署到Ubuntu服务器中。
Vue+ElementUI多项目部署到阿里云nginx下
在记录自己编程工作与编程生活的同时，给那些困于无法入门编程世界的朋友提供一点帮助，在有限的生命中给有需要的人尽一点绵薄之力。
01-14 918
Vue+ElementUI多项目部署到阿里云nginx下一、在线教育网站（nuxt项目）部署二、nginx安装部署三、配置nginx作为nuxt项目的反向代理四、在线教育系统后台管理UI系统itcollege（Vue项目）打包及部署到nginx中 一、在线教育网站（nuxt项目）部署 项目进行打包前准备工作，即修改nuxt.config.js文件 根据需要可以设置nuxt.config.js，修改base节点为你自己的内容 修改utils下面的request.js文件，需要修改的地方如下：
vue-admin-element+Electron打包exe可执行文件(输出为dist文件夹即可)
weixin_53414331的博客
04-24 1832
想要将写好的前端项目打包为可执行的exe文件。(资源放在主页自取)
【vue】vue +element 搭建项目，vue-cli 如何打包上线
weixin_33893473的博客
08-22 143
以自己的项目为例 第一步：手动修改config文件夹中的index.js文件中的build对象，将 assetsPublicPath 中的 “/” ，改为 “你实际的加载路径” 如图： 第二步：执行(c)npm run build 第三步：发现目录下多一个dist的文件夹，双击点击index.html,就可以在本地查看效果 如图： ps:注意事项 　　A.如果在con...
vue项目打包总结（babel安装问题、打包后直接访问dist文件夹、elementui样式失效等）
是日前端
11-11 4545
官方文档有简单的方法: npm install -g serve(全局安装) serve -s dist(运行打包后的文件)
vue项目打包部署到服务器
nininna的博客
09-06 7717
vue项目打包部署到远程服务器过程总结
vue项目打包部署到腾讯云全过程
xYY_X_xYY的博客
10-28 6496
文章目录1.打包本地vue项目2.购买云服务器3.使用xshell4.在xshell里安装宝塔5.宝塔操作6.成功访问 关于前端部署研究了挺久的，一开始毫无头绪也走了很多弯路，看了许多视频和文档之后，才慢慢有了了解，成功访问之后特别开心，希望记录下来对可能遇到同样问题的各位有一丢丢小帮助哈~ 1.打包本地vue项目 运行npm run build 生成dist目录文件（之后就是将该文件放到云服务器上） 2.购买云服务器 你可以选择在腾讯云上租一个云服务器，然后选择centos云服务器，租用成功
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值