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

这篇具有很好参考价值的文章主要介绍了如何在Linux服务器上部署Vue项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

 文章来源地址https://www.toymoban.com/news/detail-430141.html

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

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

 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中,如下图。

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

 

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

 

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

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

 

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

 

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

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

 

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

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

 

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

 

到了这里,关于如何在Linux服务器上部署Vue项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Linux | 将SpringBoot+Vue项目部署到服务器上

    大家好,我是初心,咱们又见面了!今天想跟大家分享的内容是如何部署 SpringBoot+Vue的前后端分离项目到服务器上。 本篇文章收录于 初心 的 Linux教程 专栏。 🏠 个人主页:初心%个人主页 🧑 个人简介:大家好,我是初心,和大家共同努力 💕 座右铭:理想主义的花,终究

    2024年02月04日
    浏览(40)
  • vue项目打包部署在windows或linux服务器上

    最近写了一个前后端分离的项目,前端用的是vue,因此记录一下将该项目部署到服务器的整个过程。 1.首先,在控制台输入npm run build命令(或者npm run build:prod)。该命令用于将前端vue打包。打包后的文件是dist文件夹。(开发阶段的一些配置在打包后会失效,比如开发阶段配置

    2024年02月11日
    浏览(75)
  • 【Springboot】--如何将springboot+vue项目部署到云服务器?

    目录 一、准备工作 1、购买云服务器 2、获取面板地址 二、jdk和数据库 1、安装环境  2、配置jdk环境变量 3、java版本的问题 4、添加数据库 三、前端部署  1、vue 2、创建站点 ​编辑 四、后端部署 1、application.yml 2、idea打包 3、运行jar包 4、开放端口 五、可能遇到的问题 1、4

    2024年04月27日
    浏览(36)
  • Vue项目上线打包好的文件如何在服务器上部署?

    1.打开router下的js文件,调成hash模式: mode:\\\'hash\\\'   2.终端输入: npm run build 3.此时项目中会多出一个dist的文件,这个文件就是我们打包出来的项目   (1)建立一个新的文件夹 (2)终端输入命令: npm init (3)输入: xxx_server (4)然后一路按回车到文件夹——框架完成,如下图

    2024年02月11日
    浏览(57)
  • Spring Boot+Vue前后端分离项目如何部署到服务器

    🌟 前言 欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍 🤖 洛可可白 :个人主页 🔥 个人专栏 :✅前端技术 ✅后端技术 🏠 个人

    2024年04月11日
    浏览(61)
  • 虚拟机VMware,linux,centos,如何将项目部署到服务器上面

    vmware 是安装虚拟机的软件,centos是系统,linux是系统内核 将本地项目上线到服务器上面,如何实现呢? 准备好服务器,可以选择阿里云服务器 首先需要搭建环境,运行的主要环境是jdk+tomcat+mysql; 通过远程连接工具,将jdk版本可以直接拖拽到服务器上面, 实现tomcat配置 实现

    2024年02月15日
    浏览(55)
  • 如何使用Docker将.Net6项目部署到Linux服务器(一)

    目录 一 配置服务器环境 1.1 配置yum                                                                                                                     1.1.1 更新yum包 1.1.2 yum命令 1.2 配置docker                                                           

    2024年02月04日
    浏览(47)
  • 如何快速搭建自己的阿里云服务器(宝塔)并且部署springboot+vue项目(全网最全)

    对于新手或者学生党来说,有时候就想租一个云服务器来玩玩或者练练手,duck不必花那么多钱去租个服务器。这些云服务厂商对学生和新手还是相当友好的。下面将教你如何快速搭建自己的阿里云服务器,完成云服务器的部署。 现在阿里云对于新用户来说,还是挺仗义的,

    2024年02月04日
    浏览(84)
  • 手把手教你如何把vue项目打包后部署到服务器(小白教程)

    一.需要用到的工具 vscode 下载链接:Visual Studio Code - Code Editing. Redefined FinalShell 下载链接:FinalShell官网 二.打包步骤 1.vscode打开你的vue项目-- 点终端 -- 输入npm run build 按回车进行打包;  2.打包成功 , 生成了dist文件夹, 打包好的文件会默认存放在里面;   三. 用FinalShell连接服

    2024年02月16日
    浏览(58)
  • 【Python】如何在服务器上优雅的部署Python项目(Linux/Windows/Mac)

    一般每个不同的项目都会依赖各自的库,有些库的版本不一样会引起冲突,为了解决这个问题,需要使用 虚拟环境 ,Python可以在 每个项目目录下创建各自的虚拟环境 , 项目所依赖的包就在当前目录环境下 ,这样避免了 库版本的冲突 ,也方便相同操作系统间可以快速的拷

    2024年04月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包