nginx下部署vue項(xiàng)目的方法步驟
今天要用到服務(wù)器nginx，還需要把自己的vue的項(xiàng)目部署到服務(wù)器上去所以就寫一下記錄下來(lái)。
首先要去nginx官網(wǎng)下下載nginx：
下載地址：https://nginx.org/en/download.html
下載下來(lái)會(huì)是一個(gè)解壓包，解壓到你想放的文件夾下
運(yùn)行nginx.exe，然后打開瀏覽器輸入localhost出來(lái)如下圖片所示就說(shuō)明成功了：
然后如果沒有成功出來(lái)的話也不要慌不要怕，可能是你的端口被別的內(nèi)容所占了這時(shí)你就打開你的nginx的目錄下找到conf
點(diǎn)擊進(jìn)去然后找到一個(gè)nginx.conf的文件
然后把它用編輯器的方式打開，打開之后找到這里的sever的listen就是你的端口號(hào)，默認(rèn)的是80端口，你可以根據(jù)自己沒有被占用的端口進(jìn)行改寫，改寫完成之后保存然后打開你的localhost:你改寫的端口號(hào)就OK了
server {
listen 8088;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
上面是安裝配置nginx服務(wù)器的方法，下面就是如何把自己的vue項(xiàng)目部署到你所安裝配置的nginx服務(wù)器上的步驟了：
首先找到自己的vue的項(xiàng)目然后輸入命令 npm run build 他會(huì)在你的vue目錄下生成一個(gè)dist文件夾里面就是你的vue的項(xiàng)目
然后打開這個(gè)dist文件夾把里面的內(nèi)容復(fù)制下來(lái)里面會(huì)有兩個(gè)文件一個(gè)是index.html是主目錄還有一個(gè)是static文件夾
把他們復(fù)制下來(lái)然后打開你的nginx的目錄下的html文件里面會(huì)有兩個(gè)默認(rèn)文件直接刪掉不要留，然后把你剛剛復(fù)制的文件粘貼進(jìn)去
然后打開瀏覽器輸入最開始改的端口號(hào)localhost:你所改的端口號(hào)回車；你就會(huì)看到自己的vue的項(xiàng)目跑起來(lái)了我的打開就是這樣的咯：
這樣就大功告成了~~~~~
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
nginx如何設(shè)置多個(gè)靜態(tài)訪問(wèn)的文件夾
這篇文章主要介紹了nginx如何設(shè)置多個(gè)靜態(tài)訪問(wèn)的文件夾問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
Nginx使用Lua模塊實(shí)現(xiàn)WAF的原理解析
waf是通過(guò)執(zhí)行一系列針對(duì)HTTP/HTTPS的安全策略來(lái)專門為Web應(yīng)用提供保護(hù)的一款產(chǎn)品，本文重點(diǎn)給大家介紹Nginx使用Lua模塊實(shí)現(xiàn)WAF的原理，需要的朋友參考下吧2021-09-09
Nginx多ip部署多站點(diǎn)的實(shí)現(xiàn)步驟
使用Nginx在具有多個(gè)IP地址的服務(wù)器上部署多個(gè)站點(diǎn),從而實(shí)現(xiàn)高效、安全的網(wǎng)站托管,本文主要介紹了Nginx多ip部署多站點(diǎn)的實(shí)現(xiàn)步驟,感興趣的可以了解一下2024-01-01
Nginx設(shè)置Referer來(lái)防止盜圖的實(shí)現(xiàn)方法
這篇文章主要介紹了Nginx設(shè)置Referer來(lái)防止盜圖的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
這篇文章主要介紹了Nginx session丟失問(wèn)題處理解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Nginx高可用(主從、主主模式)的項(xiàng)目實(shí)踐
本文介紹了Nginx高可用性的兩種主要解決方案,主從架構(gòu)和主主架構(gòu),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
ngx_lua_waf是一個(gè)基于ngx_lua的web應(yīng)用防火墻。代碼很簡(jiǎn)單，開發(fā)初衷主要是使用簡(jiǎn)單，高性能和輕量級(jí)。下面我們來(lái)看看如何在為nginx安裝waf模塊2016-08-08
這篇文章主要介紹了詳解Nginx輪詢算法底層實(shí)現(xiàn)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要為大家詳細(xì)介紹了如何將Nginx配置為將HTTP（80端口）請(qǐng)求重定向到HTTPS（443端口）,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2025-04-04
本文主要介紹了Nginx配置中更換SSL證書后,新證書不生效的問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12