首页 > 系统相关 >如何在Linux服务器上部署Vue项目

如何在Linux服务器上部署Vue项目

时间:2023-04-30 20:44:57浏览次数:42  
标签:Vue dist buildtest zip Linux 服务器 目录

1. 在本地将Vue项目打包
以项目运行在vscode为例,在调试窗口输入 npm run build待命令执行完毕之后,在项目目录下会生成dist文件夹,如下图

 

2. 创建一个运行文件,名字是:server.js

 server.js中的内容如下:

const express = require('express');
const app = express();
app.use(express.static('./dist'));

//运行时的端口,可以自己自定义
const port = 7777;

app.listen(port, function (err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:' + port + '\n');
});
———————————————

3.打包上传文件并将该文件上传到linux中
在windows中创建一个文件夹,名字自取,例如buildtest。将项目中的dist、node_modules、server.js复制到buildtest中,如下图。

 

 

4.上传到Linux中
windows中的文件上传到Linux中的办法有很多,这里我用的时Xftp软件。
如果你要上传的不是隐藏目录的话,那用MobaXterm之类的软件连接到服务器之后直接往相应的文件夹下面拖拽就可以了,但是因为我上传到的目录是隐藏目录,在可视化界面找不到。
安装包:
————————————————
Xftp https://www.aliyundrive.com/s/Ya282r7NYV5 提取码: 3b1i 点击链接保存,或者复制本段内容,打开「阿里云盘」APP ,无需下载极速在线查看,视频原画倍速播放

 

 

建立连接成功后你会看到以下界面。
注意:!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
一定要将buildtest打包成压缩文件,例如我这里是打包成了zip文件,不然上传的时候特别慢,而且还可能出现文件丢失的情况。在会话窗口选择好你要上传到Linux中的哪个位置之后,拖拽进去即可。
————————————————

 

5、解压buildtest.zip并运行
cd 到Linux中存放buildtest.zip的目录中,执行命令 unzip buildtest.zip即可解压buildtest.zip并存放在同级目录中,如下图,当然,如果你不想放在同一级目录那也可以解压到其他目录,相关命令自行查询。
————————————————

 

6.查看是否运行
打开浏览器,输入,服务器IP+端口,例如:http://192.168.1.112:7777,别输入http://localhost:7777,
localhost是对于服务器来说,但是浏览器肯定是在你本地的windows机子上,所以你得输入服务器的ip。

写在后面:在查阅资料的时候,资料中记载的是打包文件中只需要dist、server.js,但是我试过之后报错找不到node_modules,后来我加了一个node_modules就成功运行了。

转载自:https://blog.csdn.net/weixin_44747173/article/details/127096471

 

标签:Vue,dist,buildtest,zip,Linux,服务器,目录
From: https://www.cnblogs.com/wugh8726254/p/17365744.html

相关文章

  • vue3源码-二、响应式原理effect的实现
    effect实现定义effect方法:exportfunctioneffect(fn,options:any={}){//创建响应式的effectconsteffect=createReactiveEffect(fn,options);//默认会让effect先执行一次if(!options.lazy){effect();}returneffect;}letuid=0;l......
  • 快速上手Linux核心命令(十):Linux安装软件
    目录前言rpmrpm包管理器yum自动化RPM包管理工具前言这期呢主要说一说Linux中包软件管理相关命令,这一期的命令虽然只有两个。但软件包的安装和卸载都是我们平常最常用的,需要熟练掌握。rpm和yum是CentOS主要的包软件管理。两个命令各有用处,①yum需要互联网,yum会去网上的yum......
  • 服务器出现风扇告警
    找到FAN7接口对应的风扇【处理思路】1、 风扇交叉测试2、检查主板到风扇的供电线是否松动3、供电线交叉测试......
  • linux磁盘修复(home或者其他目录无法进入,系统进入emergency mode)
    实际环境中平台服务器运行一段时间后可能会因为数据量过大或者一些意外重启设备导致某个目录无法进入,原因可能是磁盘受损,下面是我碰到过的例子:在实际平台维护中,遇到了home目录无法进入,如下图:重启之后系统后进入了emergencymode:原因就是服务器的磁盘有损坏的嫌疑。在上图界面......
  • 用C/C++在Linux和Android NDK中获取设备的IP地址
    C/C++开发的获取设备IP地址的代码,下面链接中的版本是在Linuxx86-64环境中编译(Centos7.5)的,也可在其它版本的Linux中或者AndroidNDK('armeabi-v7a','arm64-v8a','x86','x86_64'等版本)中编译。下载地址(此版本须在Linuxx86-64环境中运行):金山文档https://kdocs.cn/l/cd4VM3e......
  • vuex
    vuex介绍我们可以把vuex想象成一个手机店,所有用户都可以访问到这个手机店,手机店中有一个店员和一个维修人员,这个手机店有很多商品,比如:各种手机,蓝牙耳机,保护膜,保护套,手机卡等,这个商店的属性就相当于state。商店中还有一些商品,需要商家进行处理,比如充电器,耳机,手机套等一些东西,用户......
  • Linux入门操作基础
    一、配置虚拟机NAT网络连接查看vmware的NAT网络默认配置vmwarestation软件点击上方“编辑”,选择“虚拟网络编辑器”找到vmnet10,是NAT模式,子网地址是172.25.2.0,子网掩码是:255.255.255.0.再点击“NAT设置”,可看到它的网关:172.25.2.2配置当前虚拟机的网络配置vmwarestation......
  • linux 软中断
    中断的分类中断分为硬中断和软中断,其分类依据是实现机制,而不是触发机制,比如CPU硬中断,它是由CPU这个硬件实现的中断机制,但它的触发可以通过外部硬件(比如GPIO),软件的INT指令,或者CPU执行检测(访问非法地址、除法异常)。一些资料会把以上三种方式做区分,把INTn这种方式叫做软件中断,因......
  • 阿里云服务器无法使用udp连接,防火墙安全组全开仍然无法连接(已解决)
    我使用的是阿里云的ecs服务器,想使用openvpn的udp连接,但是始终无法连接到,最终确定问题到udp连接失败上,期间使用nc测试,客户端能ping通服务器,但是就是不能使用udp连接到,也换过网络换过软件测试,消息都不能发到服务器今天问阿里的售后工程师,才知道他们的安全组分了很多个区域,设置安全......
  • linux安装docker-compose
    手动安装docker-compose1)下载地址https://github.com/docker/compose/2)第一种方法将下载的文件放入bin目录下mvdocker-compose-linux-x86_64docker-composecpdocker-compose/usr/bin/chmod+x/usr/bin/docker-composedocker-compose--version3)第三种方法创造软......