如何在Linux伺服器上部署Vue項目

来源:https://www.cnblogs.com/wugh8726254/archive/2023/04/30/17365744.html
-Advertisement-
Play Games

CSS知識點總結 文章內容可能較多且雜亂,可以查看頁面右方的目錄,以及使用Ctrl+F搜索頁面內容進行內容定位。 常用屬性 推薦搭配文檔使用,可以複製屬性名,到文檔查看該屬性對應的可選值。 👉MDN Web Docs 盒模型 寬度:width 高度:height 邊框:border 圓角:bord ...


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

 

本文來自博客園,作者:.net&new,轉載請註明原文鏈接:https://www.cnblogs.com/wugh8726254/p/17365744.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • P6818 [PA2013]Działka 前言 我太菜了。。。。 對著 jiangly 大佬的題解研究了一下午研究了一下午才搞出來(淚目。 作為一個蒟蒻,我就詳細的講一下我對與本題的理解。 題意 本題的的題意描述的還是比較明瞭。 在二維坐標系中,輸入 $n$ 個點 $m$ 次詢問, 每次詢問,給出 ...
  • 測試環境 Python 3.6.2 代碼實現 非多線程場景下使用 新建並保存EXCEL import win32com.client from win32api import RGB def save_something_to_excel(result_file_path): excel_app = ...
  • 以前寫的C++基本都是C with STL,大多是面向過程的演算法題,或者比較小的項目,然後經常報各種編譯錯誤(對編譯原理不熟),經常把人搞到崩潰,搞不懂構建、鏈接之類的東西。 現在開始記錄一下XMake的學習筆記,記錄一些學習過程中踩的坑,在這篇文章,你將學習到Windows下利用MSYS2進行Mi ...
  • 在.NET Core部署到linux(CentOS)最全解決方案,常規篇一文,我們詳細講解了傳統的.NET Core部署到Linux伺服器的方法,學到了Linux在虛擬機下的安裝、Xshell,Xftp的使用方法、git在linux下的交互使用以及.net core在linux下的發佈與運行全過程。... ...
  • 最近遇到公司的一個項目,需要將多張圖片合併成一個播放的視頻,找了很多資料和嘗試了工具,遇到很多的坑,這裡記下來,希望大家也能順利解決遇到的問題。 合併視頻,主要可以借用OpenCV 和 ffmpeg,這裡是嘗試用ffmpeg.exe的工具去實現圖片文件合併成視頻。 輸入存儲視頻文件的路徑,通過Pro ...
  • 痞子衡嵌入式半月刊: 第 76 期 這裡分享嵌入式領域有用有趣的項目/工具以及一些熱點新聞,農曆年分二十四節氣,希望在每個交節之日準時發佈一期。 本期刊是開源項目(GitHub: JayHeng/pzh-mcu-bi-weekly),歡迎提交 issue,投稿或推薦你知道的嵌入式那些事兒。 上期回顧 ...
  • (Linux安裝軟體) 前言 這期呢主要說一說Linux中包軟體管理相關命令,這一期的命令雖然只有兩個。但 軟體包的安裝和卸載都是我們平常最常用的,需要熟練掌握。 rpm和yum 是CentOS 主要的包軟體管理。 兩個命令各有用處,①yum需要互聯網,yum會去網上的yum源獲取所需的軟體包 ② ...
  • 前言 本篇文章主要介紹的關於本人在使用MySql記錄筆記的一些使用方法和經驗,溫馨提示,本文有點長,約1.5w字,幾十張圖片,建議收藏查看。 一、MySql安裝 下載地址:https://dev.mysql.com/downloads/ 在安裝MySql之前,查看是否以及安裝過MySql,如果已經安 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...