Nginx搭建本地服務器,無需購買服務器即可測試vue項目打包后的效果

一.前言

? ? ? ? 本文是在windows環境(Linux環境下其實也大同小異)下基于Nginx實現搭建本地服務器,手把手教你部署vue項目。

?二.Nginx入門

? ? ? ? 1)下載安裝

? ? ? ? 進入Nginx官網下載,選擇stable版本下的windows版本下載即可

? ? ? ? ?2)下載完成解壓,可以看到如下文件夾

? ? ? ? ?3)啟動服務

在路徑欄輸入cmd進入命令提示符窗口

?輸入命令start nginx 即可啟動nginx服務

?4)效果

啟動完成后,在瀏覽器訪問 localhost:80 如果看到如下頁面,則表示nginx服務啟動成功(注意要保持命令提示符窗口是開著的

?5) Nginx常用命令

start nginx #啟動nginx服務nginx -s stop #停止nginx服務nginx -s reload #重啟nginx服務,一般修改配置文件后執行該命令

這里只是帶大家入個門,至于其他更深層次的內容就需要大家自己學習了(配置文件在下面有介紹),入過大家啟動遇到各種問題可以自行百度解決,一般都是小問題。

三.部署vue項目

1)vue項目打包

在終端輸入一下命令,進行vue項目打包

npm run build

打包完成后會出現一個dist文件夾,可在文件里查看,右鍵選擇在文件資源管理器中顯示

?打包好的項目結構是這樣的

可以將其全部復制,然后粘貼到nginx的html文件夾下(html文件夾下的內容要刪除)也可以在html文件夾下新建一個文件存起來(我的做法是存起來,放在originaryHtml文件夾下了)

?此時刷新剛才的網頁應該就可以顯示自己寫的項目了(我的很丑請不要介意),如果顯示404,可以重新輸入網址

?但是僅僅是這樣的話會有一個很嚴重的問題,無法通過路由訪問,這個問題可以通過修改配置文件來解決

2)修改配置文件

打開nginx文件夾下的conf文件下的nginx.conf文件(可以用vscode查看)

?找到這段代碼

?將location 下的代碼修改為如下代碼

location / {root   html; # 網站的靜態資源目錄,css,js,image文件等index  index.html; # 網站首頁try_files $uri $uri/ /index.html;# 配置vue路由映射#假如你訪問 localhost:80/banner 該選項會幫你在index.html里查找banner路由}

保存并在命令提示符窗口執行重啟命令(修改配置文件后要重啟才會生效

此時便可通過路由訪問項目。如果你想自己定義路由和端口,請參考如下配置

server {listen       8081;//自己配置的監聽端口,注意不要和已有的端口沖突,域名也是一樣的server_name  my.cn;//自己配置的域名location / {root   html; # 網站的靜態資源目錄,css,js,image文件等index  index.html; # 網站首頁try_files $uri $uri/ /index.html;#配置路由映射,不配置這個不能通過路由訪問網站😥}}
#這里作一個說明,在配置文件里可以有多個server配置,并排寫下去就好了,你要是怕弄混,可以在最后一個大括號里開始寫你自己的配置

配置完成重啟nginx服務后,我就可以通過my.cn:8081來訪問我自己的項目了

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/42094.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/42094.shtml
英文地址,請注明出處:http://en.pswp.cn/news/42094.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Ubuntu 20.04配置靜態ip

ip配置文件 cd /etc/netplan配置 根據需求增加 # Let NetworkManager manage all devices on this system network:version: 2renderer: NetworkManager # 管理 不是必須ethernets:enp4s0: #網卡名dhcp4: no #關閉ipv4動態分配ip地址dhcp6: no #關閉ipv6動態分配…

Arrays.asList() 返回的list不能add,remove

一.Arrays.asList() 返回的list不能add,remove Arrays.asList()返回的是List,而且是一個定長的List,所以不能轉換為ArrayList,只能轉換為AbstractList 原因在于asList()方法返回的是某個數組的列表形式,返回的列表只是數組的另一個視圖,而數組本身并沒…

Wireshark 抓包過濾命令匯總

Wireshark 抓包過濾命令匯總 Wireshark 是一個強大的網絡分析工具,它可以幫助網絡管理員和安全專家監控和分析網絡流量。通過捕獲網絡數據包,Wireshark 能夠幫助我們識別網絡中的問題、瓶頸以及潛在的安全威脅。在使用 Wireshark 進行網絡數據包分析時&…

SQL Server基礎之游標

一:認識游標 游標是SQL Server的一種數據訪問機制,它允許用戶訪問單獨的數據行。用戶可以對每一行進行單獨的處理,從而降低系統開銷和潛在的阻隔情況,用戶也可以使用這些數據生成的SQL代碼并立即執行或輸出。 1.游標的概念 游標是…

DELL PowerEdge R720XD 磁盤RAID及Hot Spare熱備盤配置

一臺DELL PowerEdge R720XD服務器,需進行磁盤RAID及Hot Spare熱備盤配置,本文記錄配置過程示例。 一、設備環境 服務器型號:DELL PowerEdge R720XD 硬盤配置:800G硬盤共24塊 二、配置計劃 1、當前狀態:2塊盤配置RAID…

AIGC+游戲:一個被忽視的長賽道

(圖片來源:Pixels) AIGC徹底變革了游戲,但還不夠。 數科星球原創 作者丨苑晶 編輯丨大兔 消費還沒徹底復蘇,游戲卻已經出現拐點。 在游戲熱度猛增的背后,除了版號的利好因素外,AIGC技術的廣泛…

js下載后端返回的文件

文件流下載 后端返回文件流形式,前端下載 // res 為請求返回的數據對象const file_data res.data // 后端返回的文件流const blob new Blob([file_data]) const href window.URL.createObjectURL(blob) // 創建下載的鏈接 const file_name decodeURI(res.header…

4. 軟件開發的環境搭建

目錄 1. 搭建環境 1.1 檢查 JDK 1.2 檢查 MySQL 數據庫 1.3 檢查 Maven 1.4 檢查 GITEEGIT 1.5 安裝插件 1.5.1 安裝 Spring Boot Helper 1.5.2 安裝 lombok 1.6 創建倉庫 1.6.1 登錄 GITEE 創建倉庫并復制倉庫地址 1.6.2 克隆到本地 1.7 創建工程 1.7.1 設置編碼…

【Spring】Bean的實例化

1、簡介 在容器中的Bean要實例化為對象有三種方式 1、構造方法 2、靜態工廠 3、實例工廠 4、實現工廠接口 2、構造方法 構造方法實例化Bean即是直接通過構造方法創建對象 <bean id"bookDao" class"com.wn.spring.dao.impl.BookDaoImpl"/> 當不存在…

怎么把pdf壓縮到5m以內?壓縮辦法非常多

怎么把pdf壓縮到5m以內&#xff1f;PDF文件是我們辦公過程中較為常用的文件格式&#xff0c;PDF文件所包含的內容通常較多&#xff0c;比如文本、圖像以及音視頻等等。這樣的話&#xff0c;PDF文件占用內存也較大。如果需要對PDF文件進行使用、傳輸、分享等的話&#xff0c;可能…

單片機之從C語言基礎到專家編程 - 4 C語言基礎 - 4.8 運算符

1.算術運算符 運算符名稱備注加法運算符雙目運算&#xff0c;a b-減法運算符雙目運算&#xff0c;a - b*乘法運算符雙目運算&#xff0c;a * b/除法運算符雙目運算&#xff0c;a / b%求余運算符雙目運算, a % b自增運算符單目運算, a–自減運算符單目運算, a– 2.關系運算符…

Vue2集成Echarts實現可視化圖表

一、依賴配置 1、引入echarts相關依賴 也可以卸載原有的&#xff0c;重新安裝 卸載&#xff1a;npm uninstall echarts --save 安裝&#xff1a;npm install echarts4.8.0 --save 引入水球圖形依賴 npm install echarts-liquidfill2.0.2 --save 水球圖可參考文檔&#xff1…

MySQL索引(Index)

Index 數據庫中的索引&#xff08;Index&#xff09;是一種數據結構&#xff0c;用于提高數據庫查詢性能和加速數據檢索過程。索引可以看作是數據庫表中某個或多個列的數據結構&#xff0c;類似于書中的目錄&#xff0c;可以幫助數據庫管理系統更快地定位和訪問數據。它們是數…

Linux——KVM虛擬化

目錄標題 虛擬化技術虛擬化技術發展案例KVM簡介KVM架構及原理KVM原理KVM虛擬化架構/三種模式虛擬化前、虛擬化后對比KVM蓋中蓋套娃實驗 虛擬化技術 通過虛擬化技術將一臺計算機虛擬為多臺邏輯計算機&#xff0c;在一臺計算機上同時運行多個邏輯計算機&#xff0c;同時每個邏輯…

智安網絡|零信任安全框架:保障數字化時代網絡安全的最佳實踐

隨著數字化時代的快速發展&#xff0c;網絡安全問題變得越來越突出。傳統的安全防御模式已經不再適用于現代復雜的網絡環境中。為了應對日益增長的網絡威脅&#xff0c;零信任安全模式應運而生。 一、什么是零信任&#xff1f; 零信任是一種安全框架和哲學&#xff0c;它基于…

pytest的fixture梳理

fixture特性 夾具是在測試中用于提供共享資源、設置測試環境或模擬行為的工具。 1. 可以重復使用&#xff0c;多個用例可以使用同一個fixture 2. 一個測試用例可以使用多個裝置 import pytest # Arrange pytest.fixture def first_entry():return "a"# Arrange pyt…

全新 – Amazon EC2 M1 Mac 實例

去年&#xff0c;在 re: Invent 2021 大會期間&#xff0c;我寫了一篇博客文章&#xff0c;宣布推出 EC2 M1 Mac 實例的預覽版。我知道你們當中許多人請求訪問預覽版&#xff0c;我們盡了最大努力&#xff0c;卻無法讓所有人滿意。不過&#xff0c;大家現在已經無需等待了。我很…

postmarketOS

主步驟 #以下全程插入usb線 fastboot devices fastboot getvar all fastboot erase userdata fastboot erase system fastboot erase cachepmbootstrap init pmbootstrap installpmbootstrap flasher flash_rootfs --partition userdata pmbootstrap flasher flash_kernel…

java生成Excel表格

public HSSFWorkbook CreateJZZJSList() {// 繪制ExcelString fileName "自動分析詳情";HSSFWorkbook wb new HSSFWorkbook();//創建工作相簿對象HSSFSheet sheet wb.createSheet(fileName); // --->創建了一個工作簿sheet.setDefaultRowHeight((short) 600);…

前端開發工具及環境配置

1.前端開發環境node npm環境配置 第一步&#xff1a;打開Download | Node.js (nodejs.org)下載&#xff0c;解壓。 找到下載壓縮包進行解壓 解壓到D盤目錄下&#xff1a; 第二步&#xff1a;配置環境變量&#xff1a;右擊此電腦點擊屬性進入高級系統設置 點擊高級系統設置進入…