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

最新推荐文章于 2024-05-01 19:17:00 发布
VIP文章 最新推荐文章于 2024-05-01 19:17:00 发布
阅读量1.5k 收藏 3
点赞数 1
分类专栏： 总结 文章标签： vue java tomcat
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bob_sm/article/details/107380724
版权

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

Simonn_z
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue+elementui项目打包后样式变化问题
10-15
主要介绍了解决vue+elementui项目打包后样式变化问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前后端分离项目部署服务器,前后端分离项目部署到云服务器
weixin_35843096的博客
08-11 1202
前后端分离项目部署到云服务器 内容精选换一换为了避免不必要的费用产生，完成本示例体验后，可释放以下资源。资源释放后无法恢复，请谨慎操作。项目是使用DevCloud各服务的基础，删除项目可将该项目中所有数据(包括工作项、文档、代码仓库、软件包、构建/部署任务等)一并删除。购买弹性云服务器时，需配置弹性IP及云硬盘。删除弹性云服务器时，要同时选择将弹性IP及挂载的硬盘删除。为了避免不必要的费用产生，完...
在腾讯云上部署vue前后端分离项目
CoderAxiba的博客
02-17 1864
1、购买云服务器 我使用的腾讯云，通过学生身份认证白嫖了15天的试用。。。 操作系统为Linux的cent OS7 关于如何购买并配置云服务器，可以参照此篇官方文档 快速配置 Linux 云服务器 2、配置云服务器的环境 我的本地项目用到了node，mysql数据库，所以就要在云服务器上也把这些环境给配置好，首先是配置node环境： 1、执行以下命令，下载 Node.js Linux 64位二进制...
如何将前后分离的项目部署到云服务器
qq_51985869的博客
03-12 965
云服务器操作系统分为Windows和Linux类，Linux系统相对于win占用更少系统资源，一般选用Linux阿里云Linux镜像可选Aliyun Linux、CentOS、Ubuntu、Debian、SUSE Linux、OpenSUSE、CoreOS和FreeBSD。Aliyun Linux是阿里云原生Linux操作系统，针对ECS做了大量深度优化，完全兼容CentOS生态和操作方式；Ubuntu基于Debian，新手更容易上手，时长占有率也高。综上，阿里云ECS云服务器Linux镜像。
springboot+vue+ElementUi项目实例，部署到云服务器上
weixin_45573378的博客
06-19 957
项目地址：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
部署Vue项目到阿里云服务器（Apache环境）+ 本次项目总结
cungudafa的博客
08-30 7586
目录序正文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 1080
【代码】Vue+ElementUI项目打包部署到Ubuntu服务器中。
基于SpringBoot+Vue+ElementUI 前后端分离的人力资源管理系统（源码+数据库脚本）.zip
07-08
本项目是一套基于SpringBoot+Vue前后端分离的人力资源管理系统，主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战的Java学习者。也可作为课程设计、期末大作业。包含：项目源码、数据库脚本等，该项目...
前后端分离 -- SpringBoot + Vue实战项目 部署至阿里云服务器
04-18
本项目用于部署至Linux服务器案例项目 该项目技术栈为：SpringBoot + Spring Security + Vue + ElementUI 前后端分离实现整体项目 一个简单的前后端分离项目
基于Vue+ElementUI+Springboot前后端分离网约车预约系统源码+数据库.zip
01-11
基于Vue+ElementUI+Springboot前后端分离网约车预约系统源码+数据库.zip开发技术：Vue + ElementUI + Springboot 开发软件：Idea为了用户搭乘车子更方便，我们设计了一个网约车预约系统，项目一共有3个身份包括乘客...
Element-Ui和Vue项目的结合 实现前后台分离
qq_44424498的博客
11-05 957
Element-Ui和Vue项目的结合 第一步：使用脚手架创建一个Vue项目 vue init webpack 项目名 创建在线项目 vue init webpack 项目名 创建离线项目 第二步：在项目中下载element-ui的模板 cd pro01 cd 项目名 npm install element-ui -S ...
Vue+ElementUI多项目部署到阿里云nginx下
若兰幽竹
01-14 769
Vue+ElementUI多项目部署到阿里云nginx下一、在线教育网站（nuxt项目）部署二、nginx安装部署三、配置nginx作为nuxt项目的反向代理四、在线教育系统后台管理UI系统itcollege（Vue项目）打包及部署到nginx中 一、在线教育网站（nuxt项目）部署 项目进行打包前准备工作，即修改nuxt.config.js文件 根据需要可以设置nuxt.config.js，修改base节点为你自己的内容 修改utils下面的request.js文件，需要修改的地方如下：
【vue】vue +element 搭建项目，vue-cli 如何打包上线
weixin_33893473的博客
08-22 98
以自己的项目为例 第一步：手动修改config文件夹中的index.js文件中的build对象，将 assetsPublicPath 中的 “/” ，改为 “你实际的加载路径” 如图： 第二步：执行(c)npm run build 第三步：发现目录下多一个dist的文件夹，双击点击index.html,就可以在本地查看效果 如图： ps:注意事项 　　A.如果在con...
vue项目打包总结（babel安装问题、打包后直接访问dist文件夹、elementui样式失效等）
是日前端
11-11 4352
官方文档有简单的方法: npm install -g serve(全局安装) serve -s dist(运行打包后的文件)
java方法重写（重点讲），方法重载
weixin_46281068的博客
04-27 1236
一、方法重载定义：一个类中，出现多个方法的名称相同，但是它们的形参列表是不同的，那么这些方法就称为方法重载了。注意：一个类中，只要一些方法的名称相同、形参列表不同，那么它们就是方法重载了，其它的都不管（如:修饰符，返回值类型是否一样都无所谓）。形参列表不同指的是:形参的个数、类型、顺序不同，不关心形参的名称。应用场景：开发中我们经常需要为处理一类业务，提供多种解决方案，此时用方法重载来设计是很专业的。
Day25-Java基础之常用类1
m0_46053885的博客
04-27 1094
同时我们发现Math类中的方法都是静态的，因此在使用的时候我们可以直接通过类名去调用。对于计算机而言，其实是没有数据类型的概念的，都是0101010101，数据类型是编程语言自己规定的，所以在实际存储的时候，先把具体的数字变成二进制，每32个bit为一组，存储在数组中。比较内存地址值一般情况下是没有意义的，我们希望比较的是对象的属性，如果两个对象的属性相同，我们认为就是同一个对象；如果我们的数据是一个浮点类型的数据，有的时候计算机并不会将这个数据完全转换成一个二进制数据，而是将这个将其转换成一个无限的。
链表刷题集
yajunjiao的专栏
04-30 468
本文主要列举了一些刷的题，不多，有那么几道，也建议各位去建立自己的刷题集。积少成多。
Spring Cloud——LoadBalancer
最新发布
????
05-01 1040
这里只是简单的讲解了一下LoadBalancer如何使用，因为实际上我们使用的不是很多，主要还是使用OpenFeign。
d15(136-148)-勇敢开始Java，咖啡拯救人生
m0_73459387的博客
04-28 1055
对象哈希值的特点：同一个对象调用hashCode()返回的哈希值相同；HashMap的键依赖hashCode方法和equals方法保证键的唯一，存储自定义类型的对象时，重写这两个方法。实际上，Set系列集合的底层就是基于Map实现的，只是Set集合中的元素要键数据，不要值数据。当12个位置都占满时就会扩容，大约扩容为原来的二倍，再把原数组数据转移到新数组。使用迭代器遍历集合时，又同时在删除集合中的数据，程序就会出现并发修改异常的错误。基于哈希表实现，每个键值对额外多了一个双链表的机制，记录元素顺序（保证。
vue+elementui项目打包
08-17
对于使用Vue和Element UI开发的项目，你可以使用Vue CLI来进行项目的打包。下面是一些简单的步骤： 1. 首先，确保你已经安装了Node.js和npm。你可以在终端中运行以下命令来检查它们的安装情况： ``` node -v npm -v ``` 2. 如果你还没有安装Vue CLI，请在终端中运行以下命令进行安装： ``` npm install -g @vue/cli ``` 3. 确定你的项目使用了Element UI，如果没有，请使用以下命令进行安装： ``` npm install element-ui ``` 4. 在你的项目根目录下，运行以下命令来创建一个生产环境的打包版本： ``` npm run build ``` 这个命令会在项目根目录下生成一个`dist`文件夹，面包含了打包后的静态资源文件。 5. 打包完成后，你可以将`dist`文件夹中的内容部署到你的服务器上，或者将它们放在任何支持静态文件的位置。确保你的服务器已经配置好了相关的路由。 这样，你就完成了Vue和Element UI项目的打包过程。希望对你有帮助！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值