如何将前端部署到Linux中

已于 2022-06-13 13:26:51 修改
阅读量2.8k 收藏 5
点赞数 2
分类专栏： Linux 文章标签： webpack 前端 node.js
于 2022-06-13 10:17:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61634823/article/details/125254836
版权

一、将前端内容进行编译打包

1.1打开.env.productionwenjain (发布)

修改VUE_APP_BASE_API = '/prod-api'

修改后VUE_APP_BASE_API = 'http://192.168.2.33:8080' 192.168.2.33为Linux的IP地址 8080为端口号

1.2运行打包

在控制台输入npm run build:prod 会自动生成dist文件夹 里面的内容就是打包后的所有

二、将打包好的内容传到Linux当中

打开FileZilla并连接你的Linux系统

将dist文件夹传到Linux中/usr/local/tomcat/webapps/Root文件夹下

三、运行后端项目

根据以上步骤前端就部署完毕

打开redis 命令：.bin/redis-server redis.conf

运行项目 命令：nohup java -jar -Xmx1024m -Xms1024m ruoyi.jar >log.txt &

四、在网页进行访问

 

Stars228
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
SpringBoot + Vue 项目部署上线到 Linux 服务器，前端开发结构
sgegv的博客
04-04 581
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取[外链图片转存中…(img-KyH36U8Y-1712206244770)][外链图片转存中…(img-pT65AOSp-1712206244770)]
vue里给img的src绑定数据失效
Zwwxd666的博客
07-29 567
在v-for遍历数据时想要通过给img的src单向绑定 图片路径时出现问题。上网查说是webpack构建时识别不到，直接不单绑数据，写死试试看。直接require导入图像文件模块。
将写的项目部署到Linux服务器上
AZK707的博客
06-05 985
例如：腾讯云，阿里云等（经常会有学生优惠）这个腾讯云，新用户82元可以使用一年，还是可以的（如果觉得贵，可以和同学一起拼一个~~）
TypeScript基础【学习笔记】
kuiini的博客
07-29 539
ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext。直接使用 tsc 命令的前提时要现在项目根目录下创建一个 ts 的配置文件 tsconfig.json。直接使用 tsc 指令，可以自动将当前项目下的所有 ts 文件编译为 js 文件。通过类型声明可以指定 TS 中变量（参数、形参）的类型。类新声明给变量设置了类型，使得变量只能存储某种类型的值。指定被编译文件的列表，只有需要编译的文件少时才会用到。
自动引入神器unplugin-auto-import，和满屏的import说拜拜
Caleb的博客
07-31 576
是一个现代的自动导入插件，它支持多种构建工具（例如 Vite 和 Webpack），可以根据你在代码中使用的标识符自动生成相应的import语句，从而减少重复代码，简化开发过程。官方仓库。
create-vue项目的README中文版
计算机图形学
07-29 476
创建基于vite的vue项目的推荐方法。
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1406
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
最新发布
m0_62336925的博客
08-02 320
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 893
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 370
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
【前端面试】五、框架
weixin_49015558的博客
07-31 494
1 Vue2 2 Vue3 3 React 4 Angular
electron 主进程和渲染进程
qq_21087199的博客
07-29 384
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2357
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
前端 axios 封装
清云
07-29 501
前端 axios 封装
【前端面试3+1】20 css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理、【二叉树的中序遍历】
qq_61798306的博客
07-30 729
本文包含八股文：css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理，算法【二叉树的中序遍历】
前端代码混淆加密（使用Terser、WebpackObfuscator）
@Fonden
07-30 359
（注意Terser和WebpackObfuscator引入的方式不同，后者是放到plugins中）② 在 Terser 之后使用 WebpackObfuscator 进行混淆。以此在网上查找到相应工具有：Terser、WebpackObfuscator。① 使用 Terser 进行代码压缩和 source map 生成，② 设置在生产环境中才去使用混淆加密工具（开发环境会产生各种报错）为了对公司项目进行安全防护措施，前端需要进行代码混淆加密处理。压缩代码、变量和函数名混淆、删除未使用代码。
【简历】湘南某二本学院：前端简历指导，秋招面试通过率低
shuize123的博客
07-31 360
搜索和防抖之间有的区分，如果是有的话，可以去做一个处理，但是一般来说，这两个之间没什么太大关系，搜索和防抖，没有什么相关度，因为我们调后端接口都是异步调用，所以他不会出现卡顿现象，他的卡顿在什么地方，我觉得这个描述不太对，另外呢使用图片转载，这都是一个最小的一个事情，他就是一个基本的功能，就是可以说是都会的功能，所以亮点不够，至少这几个描述亮点还是有的，但是不够，挂号系统就没好讲了，这个依然是一个重度很高的项目。，其他的什么英语阅读，四级能力，这个不要去写了，没什么用。，又是登录，那登录这事太简单了，
前端必修技能：高手进阶核心知识分享 - css盒的before、after和子元素的层叠关系解析及应用
uu0216的博客
07-29 1267
一个盒子 它的 ::before伪类在最底层, ::after 伪元素在最上层, 其所有子元素在中间叠放。 盒子的 子元素堆叠关系，按照书写顺序自下而上排序：先写的叠放在下面，后写的在上面。 父元素在最下面。
前端面试宝典【设计模式】【2】
BDawn的专栏
07-31 181
工厂模式是一种创建型设计模式，它提供了一种创建对象的机制，而不暴露创建逻辑，将对象的实例化推迟到子类。工厂模式的主要目的是封装对象的创建过程，使其能够独立于客户端代码，从而提高系统的可扩展性和灵活性。工厂模式通常分为三种类型：简单工厂模式、工厂方法模式和抽象工厂模式。 模块模式是一种在 JavaScript 中实现封装和私有成员的常用设计模式。它允许你创建具有私有变量和公共方法的对象，从而避免全局命名空间的污染，并提供更好的代码组织和可维护性。模块模式通常使用立即执行的函数表达式来创建私有作用域。
ruoyi cloud前端部署到linux
04-10
如果要将b'ruoyi cloud'前端部署到Linux上，需要先安装并配置好相应的环境，如运行前端所需的Node.js等。之后，将前端代码拷贝到Linux服务器中合适的目录下，并配置好服务器的相关参数，则可以启动前端服务并在浏览器中访问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值