使用finalshell将前端dist文件部署到服务器

最新推荐文章于 2024-05-14 10:20:00 发布
最新推荐文章于 2024-05-14 10:20:00 发布
阅读量2.1k 收藏 10
点赞数 1
分类专栏： 运维 文章标签： linux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45622540/article/details/116996513
版权

以前都是打包后丢给别人，到新公司需要前端自己部署，第一次部署记录下

下载finalshell用于连接服务器

  1. 配置finalshell

在这里插入图片描述

  1. cd 到下图文件路径

在这里插入图片描述
在这里插入图片描述
3. 将要部署的dist（最新项目build之后的文件）压缩文件上传进去替代先前最好先删除之前的dist包
该指令为强制删除文件指令

在这里插入图片描述
4. 解压dist包

在这里插入图片描述

在这里插入图片描述

注意：

在服务器上的文件是tar.gz文件，我window上解压的文件是rar文件，故下载了7-zip将dist文件夹解压成tar再解压成tar.gz文件

前端码字
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 项目部署到服务器的问题解决方法
01-19
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候，在开发环境中项目可以很正常的运行，但是进入到生产环境，编译打包后，放入服务器，项目就不正常了，会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张，正确的配置加上后端的简单配合就可以解决。 如何打包 基于Vue-Cli,通过npm run build来进行打包的操作 如何部署 将打包出来的资源，基于Vue-Cli的一般是dist目录下有static目录和index.html文件，可以直接将这两个文件扔到服务端 但有时候，我们会直接将dist文件扔到服务端 出现的问题 打包到服务器后，出现资源引用路径的问题 打包到
idea自动部署前端到linux服务器
01-17
下面是使用 Idea 自动部署前端到Linux服务器的步骤和知识点： 一、安装Alibaba Cloud Toolkit插件 Idea 提供了插件 Alibaba Cloud Toolkit，用于自动部署前端到Linux服务器。要使用这个插件，首先需要安装它。安装...
前端项目部署步骤
obj66的博客
04-20 358
连接成功之后可以先看看有没有nginx，whereis nginx ，查看nginx版本命令nginx -v，全部查看好在上面输入nginx -t 查看nginx.conf配置文件，去看root他是前端打包好dist文件要放的路径，然后把dist文件放到下面就可以了。后端会给服务器账号密码，名称随便写，备注随便写，之后确认就连接到服务器了。最后重启服务器 nginx -s redload。首先需要一个工具FinalShell。
前端 finalShell 与 docker 创建 服务连接 部署项目
最新发布
lzfengquan的博客
05-14 1158
准备官网下载地址 要哪个下那个， 我的是第一个下载后 安装 打开选择 SSH 进行配置配置后点击确定即可1、yum install -y docker -y 表示不询问，使用默认配置进行安装检测版本 装最新的2、 yum list installed | grep docker 查看yum安装完成文件列表并筛选docker安装信息3、systemctl status docker 查看docker当前服务状态，active：inactive(dead)未开启，死亡状态。
使用finalshell工具部署项目到服务器
rabbitKing.的博客
12-17 4349
一、首先打包jar clean package 二、后端部署：查看那个程序使用该端口： netstat -tunlp | grep 端口号 tcp 0 0 0.0.0.0:9008 0.0.0.0:* LISTEN 26499/java 杀死该端口： kill -9 26499 备份项目到beifen文件夹中： cp -rf jar包名 beifen/备份的jar包名 删除项目包 rm -rf 项目包： rm -r
FinalShell前端部署 ssh连接的简单使用
qq_36528523的博客
11-05 1975
FinalShell 简介： FinalShell 相当于 xshell + ftp 的组合，即：FinalShell = xshell + ftp； FinalShell 只用一个程序，将xshell 、ftp同屏显示，既可以输入命令，也可以传输数据，还能以树的形式展示文件路径； FinalShell 下载地址： Windows版下载地址：http://www.hostbuf.com/downloads/finalshell_install.exe macOS版下载地址：http:/...
前端部署项目
manyi8634的博客
04-17 126
阿里云 华为云 腾讯云 优刻得 …
项目部署上线（使用FinalShell软件连接服务器）
陈乾的博客
09-25 3128
本地项目上线流程4步： 一、买服务器(机器)。 二、使用finalShell软件连接服务器。 三、給服务器安装环境（node + vue访问json）： 1、安装node环境： curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash - yum install -y nodejs 检测是否安装成功（node版本号）: node -v 四、上传代码(前端|后端)： 1. vue 打包: npm run build
用FinalShell上服务（vue前台）
是卿卿
04-28 1376
1.下载安装FinalShell 2.连接SSH(这里需要账号密码以及服务器地址) 连接成功。 3.更改config下index.js的ip设置，将本地ip换成服务器ip 4.执行npm run build 5.finalShell中连接前端服务器 进入到自己项目目录 例：cd /data0/water-web/dist 6.上传本地dist文件夹 ...
dist.zip 项目部署前端dist测试文件
05-31
dist.zip 项目部署前端dist测试文件
Vue项目打包部署到iis服务器的配置方法
10-16
主要介绍了Vue项目打包部署到iis服务器的配置方法，文中通过代码示例给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
如何在服务器上部署项目
xuan__xia的博客
09-15 2388
这个renren-admin.jar，就是生成的jar包，我们将该jar包上传到/opt/modules/apache-tomcat-7.0.57/webapps目录下。在/opt/modules/nginx/conf目录下，修改nginx.conf的配置文件，修改内容如下图所示，修改后重启nginx服务即可。这里需要注意的是，再安装mysql-community-server时候，会报错，这个时候可以再命令后加上--nodes来执行。执行如下命令进行安装，如果出现其他问题，可自行百度。
通过Finalshell搭建测试环境(安装JDK1.8/安装tomcat并部署后端java系统/安装nginx并部署前端vue系统/安装mysql)
weixin_59218470的博客
05-15 1438
1、下载linux系统的JDK1.82、通过FinalShell将jdk压缩包放到/usr/local/ 目录下3、执行tar -xzvf jdk-8u371-linux-x64.tar.gz命令解压4、配置环境变量进入到/etc目录，打开profile文件，进入编辑模式5、在文本末尾添加以下配置项6、退出之后重启配置项，输入命令source /etc/profile7、输入java -version查看是否安装成功。
腾讯云+CentOs+FinalShell 部署前端代码
weixin_46631365的博客
05-04 659
需要通过防火墙开放对外端口。(2) 配置nginx.conf ，将/usr/local/nginx/conf/nginx.conf替换为以下内容。nginx.conf 配置文件中的站点目录设置为/wwwRoot/vue_admin即可。5、vim xxx.conf 编辑纯文本文件。i 进入编辑、ESC 退出编辑、:wq 保存并退出。进入iptables配置80端口，因为nginx默认是由80端口访问。2、mv 文件夹 指定文件夹位置 // 移动某个文件夹到指定位置。1、cd // 返回或进入某个文件夹。
使用FinalShell和宝塔将项目部署到线上
m0_62156422的博客
11-15 560
使用FinalShell和宝塔将项目部署到线上
finalShell的使用下载和替换
youshuang1207的博客
07-02 1100
express+webpack实现build之后把dist文件上传到服务器（EC2）
weixin_33862041的博客
10-24 1858
用webpack搭建相关环境，如需要参考Webpack4+React+Typescript搭建开发环境安装客户端所需包1.用于发送请求，可自行选择 npm install --save request npm install --save request-promise-native 开始编写客户端上传文件代码1.首先，用递归的方式获取到...
了解如何通过webpack配置实现PWA---如何将dist文件快速运行在服务器上
祥哥的说
02-17 616
一、讲讲PWA 二、通过webpack配置实现PWA webpack.prod.js: const WorkboxPlugin = require('workbox-webpack-plugin'); plugins: [ new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[name].chunk.css' }), // 使用workbox来进行配置 new WorkboxPlugin.
vue打包dist文件 部署到服务器上样式移位vu
05-26
这种情况可能是因为在打包的时候，vue使用了相对路径而不是绝对路径。在本地开发环境中，这通常不会出现问题，但是在部署到服务器上时，由于路径不同，可能会导致样式移位。 解决方案有两种： 1. 使用绝对路径：在 vue.config.js 中设置 publicPath 为绝对路径，例如： ```js module.exports = { publicPath: '/my-app/' } ``` 这样，打包后的文件中的样式和其他资源引用的路径就会是绝对路径，而不会受部署路径的影响。 2. 设置基础路径：在 index.html 中设置 base 标签的 href 属性为部署路径，例如： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My App</title> <base href="/my-app/"> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> ``` 这样，在打包后的文件中引用样式和其他资源时，会以 base 标签的 href 为基础路径，而不会受部署路径的影响。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值