欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

nginx部署vue前端打包項(xiàng)目方式

 更新時間：2025年07月26日 11:51:56   作者：lytcreate.  
本文指導(dǎo)Vue項(xiàng)目部署至Nginx,包括打包成dist.zip、上傳解壓到nginx/html目錄、修改配置文件server塊及base路徑,替換后端IP后啟動Nginx,通過指定IP:8083訪問前端頁面

一、nginx安裝

安裝說明見：Nginx使用命令安裝說明

二、打包文件上傳部署

將vue打包后的靜態(tài)文件進(jìn)行上傳，打包后的目錄如下：

將dist文件夾進(jìn)行壓縮為dist.zip，并將該目錄打包上傳至服務(wù)器的nginx目錄： /usr/local/nginx/html，并使用unzip解壓

解壓文件：

unzip dist.zip

三、配置nginx.cnf

修改nginx配置文件：/usr/local/nginx/conf/nginx.conf

將server部分替換為如下內(nèi)容：

server {
                # nginx啟動監(jiān)聽的端口
        listen       8083;
                
        # 可以是localhost和可以是本機(jī)ip地址，如果要給公司其他同事的電腦可以訪問，需要 配置為本機(jī)的ip地址
        server_name  192.168.110.112;


                # 配置頁面中發(fā)送的請求代理到后端接口        
                location /demo/ {
                        # rewrite  ^.+api/?(.*)$ /$1/api break;
                        proxy_pass http://192.168.110.112:8081/demo/;     # 后端的請求接口
                }

                location / {
                        #程序根目錄配置，也就是剛剛打包文件放置的目錄
            root   /usr/local/nginx/html/dist;
            index  index.html index.htm;
                        # 配置把所有匹配不到的路徑重定向到index.html，vue-router的mode是history模式的情況下需要配置，否則會出現(xiàn)刷新頁面404的情況
                        try_files $uri $uri/ /index.html;
                }
       
    }

里面的信息請酌情修改，其中8083就是前端的訪問接口

四、啟動nginx

nginx

五、訪問頁面

訪問 http://192.168.110.112:8083 就可以訪問前端頁面啦！

六、注意事項(xiàng)

1.vite.config.js里面需要配置一個base值為./

2.main.js里面配置的后端ip需要將127.0.0.1修改為實(shí)際的ip，本例中為 192.168.110.112

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • Nginx服務(wù)啟動和停止實(shí)現(xiàn)

    Nginx服務(wù)啟動和停止實(shí)現(xiàn)

    使用Nginx的過程中,我們可能總是需要修改nginx配置文件,然后不停地啟動或者停止nginx服務(wù),本文就來介紹一下,感興趣的可以了解一下
    2023-11-11
  • 利用Nginx的map指令實(shí)現(xiàn)頁面跳轉(zhuǎn)

    利用Nginx的map指令實(shí)現(xiàn)頁面跳轉(zhuǎn)

    每位網(wǎng)站運(yùn)營人可能都會碰到一些情況，比如網(wǎng)站URL規(guī)則會進(jìn)行調(diào)整，需求的不斷變化也會導(dǎo)致一些舊的URL無法訪問，這個時候可以使用Nginx的 map指令匹配這些舊的URL，并跳轉(zhuǎn)到新的URL規(guī)則，而且這種方式是在Nginx層面進(jìn)行，不會對網(wǎng)站性能產(chǎn)生影響。下面來一起看看吧。
    2016-10-10
  • Nginx配置Basic Auth登錄認(rèn)證的實(shí)現(xiàn)方法

    Nginx配置Basic Auth登錄認(rèn)證的實(shí)現(xiàn)方法

    這篇文章主要介紹了Nginx配置Basic Auth登錄認(rèn)證的實(shí)現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • Nginx查看當(dāng)前連接數(shù)的配置方法

    Nginx查看當(dāng)前連接數(shù)的配置方法

    在開發(fā)過程中有時候我們需要查看Nginx的當(dāng)前連接數(shù),方便調(diào)整一些參數(shù)配置和性能調(diào)優(yōu),在Nginx中,你可以通過幾種方式來查看當(dāng)前的連接數(shù),感興趣的朋友一起看看吧
    2024-08-08
  • Nginx搭建RTMP流媒體服務(wù)器的實(shí)現(xiàn)

    Nginx搭建RTMP流媒體服務(wù)器的實(shí)現(xiàn)

    本文主要介紹了Nginx搭建RTMP流媒體服務(wù)器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • windows系統(tǒng)安裝配置nginx環(huán)境

    windows系統(tǒng)安裝配置nginx環(huán)境

    這篇文章介紹了windows系統(tǒng)安裝配置nginx環(huán)境的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • Nginx 重定向時獲取域名的方法示例

    Nginx 重定向時獲取域名的方法示例

    本篇文章主要介紹了Nginx 重定向時獲取域名的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • nginx代理服務(wù)器配置雙向證書驗(yàn)證的方法

    nginx代理服務(wù)器配置雙向證書驗(yàn)證的方法

    今天小編就為大家分享一篇關(guān)于nginx代理服務(wù)器配置雙向證書驗(yàn)證的方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
    2019-02-02
  • Nginx中Location配置超詳細(xì)講解

    Nginx中Location配置超詳細(xì)講解

    最近一直在做location 配置,遇到優(yōu)先級別問題（如果配置不當(dāng)可能存在安全隱患哦）,下面這篇文章主要給大家介紹了關(guān)于Nginx中Location配置的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • Fastdfs與nginx進(jìn)行壓縮圖片比率

    Fastdfs與nginx進(jìn)行壓縮圖片比率

    前陣子，工作搞了一下Fastdfs與nginx進(jìn)行壓縮圖片比率存儲在服務(wù)器中，今天應(yīng)用下工作時間記錄下.
    2014-07-07

最新評論