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

使用Nginx部署Vue項目全過程及踩坑記錄

 更新時間：2023年02月15日 09:07:54   作者：Hi丶ImViper  
這篇文章主要介紹了使用Nginx部署Vue項目全過程及踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Nginx部署Vue項目

很多小伙伴在做完Vue項目之后，想要部署到服務(wù)器上自己運(yùn)行試試。

其實使用Nginx就可以輕松的做到，并且實現(xiàn)請求轉(zhuǎn)發(fā)等功能。下面來看看使用步驟吧。

使用Nignx部署Vue項目步驟

1.打包Vue項目

npm run build

首先使用打包命令打包Vue項目，之后得到一個dist文件夾。

這里面存放的是已經(jīng)打包好的靜態(tài)資源文件。

image-20210323233440687

image-20210323233426363

注意：這里不同的項目打包的命令可能不一樣，需要在 package.json 里看 scripts，每個屬性就是一個命令，一般都會有 npm run serve, npm run build, npm run lint… 等等

image-20210323233545259

不同的項目結(jié)構(gòu)不一樣哦。我使用的是vue-element-admin框架。具體打包方法可以查看框架的相關(guān)文檔哦。

2.復(fù)制dist文件夾到Vue默認(rèn)目錄

安裝好Nginx，找到安裝根目錄。將dist目錄里的文件復(fù)制到html中。

這是默認(rèn)的nginx根目錄，如果這樣做的話你不用修改配置文件就可以直接運(yùn)行。

image-20210323233713317

復(fù)制完成后，雙擊nginx.exe運(yùn)行nginx就可以運(yùn)行啦。

3.高級配置

通常情況下ngxin是安裝到單獨的服務(wù)器上，因此一般是把vue打包后的dist仍到服務(wù)上的具體位置，然后修改nginx.conf的root路徑來指向我們的dist。

如果你想根據(jù)自己的需求來配置nginx，或者想部署多個項目的話。你需要通過修改配置文件來完成。

這里放一個我自己的配置。具體可以參考注釋。

server {
    # 需要被監(jiān)聽的端口號，前提是此端口號沒有被占用，否則在重啟 Nginx 時會報錯
    listen       8888;
    # 服務(wù)名稱，無所謂
    server_name  localhost;

    # 上述端口指向的根目錄
    root /opt/asing1elife/teamnote;
    # 項目根目錄中指向項目首頁
    index index.html;

    client_max_body_size 20m; 
    client_body_buffer_size 128k;

    # 根請求會指向的頁面
    location / {
      # 此處的 @router 實際上是引用下面的轉(zhuǎn)發(fā)，否則在 Vue 路由刷新時可能會拋出 404
      try_files $uri $uri/ @router;
      # 請求指向的首頁
      index index.html;
    }

    # 由于路由的資源不一定是真實的路徑，無法找到具體文件
    # 所以需要將請求重寫到 index.html 中，然后交給真正的 Vue 路由處理請求資源
    location @router {
      rewrite ^.*$ /index.html last;
    }

    # 關(guān)鍵步驟，這里表示將所有的 http://192.168.7.8:8888/teamnote/api/ 開頭的請求都轉(zhuǎn)發(fā)到下面 proxy_pass 指定的鏈接中
    # 這里使用 /teamnote/api/ 而不是 /teamnote/ ，是因為前端項目本身的訪問鏈接就是 http:192.168.7.8:8888/teamnote/
    # 為了防止在訪問頁面時請求就被 Nginx 代理轉(zhuǎn)發(fā)，這里需要更具體的配置，才能和前端訪問請求區(qū)分開
    location /teamnote/api/ {
          # 后端的真實接口
          proxy_pass http://192.168.7.8:2592/teamnote/api/;
          proxy_redirect off;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header   Cookie $http_cookie;
          # for Ajax
          #fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
          proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header x-requested-with $http_x_requested_with;
          client_max_body_size 10m;
          client_body_buffer_size 128k;
          proxy_connect_timeout 90;
          proxy_send_timeout 90;
          proxy_read_timeout 90;
          proxy_buffer_size 128k;
          proxy_buffers 32 32k;
          proxy_busy_buffers_size 128k;
          proxy_temp_file_write_size 128k;
    }
}

重新啟動 Nginx

  • 使用 nginx -s reload 可以重新加載 Nginx 的配置文件，但如果配置文件有錯，不一定會拋出異常
  • 使用 nginx -s stop 先停止 Nginx 服務(wù)，再使用 nginx 嘗試啟動 Nginx 服務(wù)，如果配置文件有異常，則會拋出異常告知啟動失敗

linux環(huán)境

通常情況下很少使用windows來作為nginx的服務(wù)器，一般使用linux。

對于linux安裝nginx有兩種方式

  • 一種是使用官方已經(jīng)編譯好的包來安裝
  • 一種是使用源碼構(gòu)建安裝

第一種方式參考官方地址https://nginx.org/en/linux_packages.html#stable

第二種方式參考官方地址https://nginx.org/en/docs/install.html中的Building from Sources片段，這種實際上就是下一個tar.gz包仍到linux服務(wù)去自己編譯。

在linux服務(wù)上和window環(huán)境上使用nginx部署vue項目并沒有太大差異，把構(gòu)建好的vue項目dist上傳到linux服務(wù)上，通用修改nginx服務(wù)器中的root來指向dist就ok了，然后使用

# centos 7
systemctl restart nginx.service
# centos 6
service nginx restart

或者是平滑重啟

service nginx reload

centos 7

systemctl restart nginx.service

centos 6

service nginx restart

或者是平滑重啟

service nginx reload

當(dāng)然，我更推薦寶塔面板，操作簡介方便！

總結(jié)

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

相關(guān)文章

  • Nginx實現(xiàn)http自動跳轉(zhuǎn)到https

    Nginx實現(xiàn)http自動跳轉(zhuǎn)到https

    本文主要介紹了Nginx實現(xiàn)http自動跳轉(zhuǎn)到https，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • Nginx跨域訪問場景配置和防盜鏈詳解

    Nginx跨域訪問場景配置和防盜鏈詳解

    這篇文章主要介紹了Nginx跨域訪問場景配置和防盜鏈詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-07-07
  • 詳解Nginx服務(wù)器中的nginx.conf配置文件

    詳解Nginx服務(wù)器中的nginx.conf配置文件

    這篇文章主要介紹了詳解Nginx服務(wù)器中的nginx.conf配置文件,包括對HTTP服務(wù)的基本配置方法,需要的朋友可以參考下
    2015-08-08
  • nginx部署vue項目的詳細(xì)圖文教程

    nginx部署vue項目的詳細(xì)圖文教程

    很多小伙伴在做完Vue項目之后,想要部署到服務(wù)器上自己運(yùn)行試試,下面這篇文章主要給大家介紹了關(guān)于nginx部署vue項目的詳細(xì)圖文教程,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • nginx?location/區(qū)別詳解

    nginx?location/區(qū)別詳解

    本文主要介紹了nginx?location/區(qū)別詳解，主要介紹了8中不同的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • nginx配置客戶端保存cookie的實現(xiàn)

    nginx配置客戶端保存cookie的實現(xiàn)

    本文主要介紹了nginx配置客戶端保存cookie的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-03-03
  • Nginx 502 Bad Gateway的原因及解決方法

    Nginx 502 Bad Gateway的原因及解決方法

    這篇文章主要給大家介紹了Nginx 502 Bad Gateway 錯誤的原因及解決方法,在php服務(wù)當(dāng)中,有兩個參數(shù)非常的重要：max_requestst和max_children,具體的原因必須要查看日志才可以弄明白,接下就和小編一起來看看具體原因及解決方法吧
    2023-08-08
  • Nginx 實現(xiàn) TCP/DUP流量按 IP 動態(tài)轉(zhuǎn)發(fā)操作方法

    Nginx 實現(xiàn) TCP/DUP流量按 IP 動態(tài)轉(zhuǎn)發(fā)操作方法

    為優(yōu)化網(wǎng)絡(luò)性能和提升服務(wù)可用性,通過Nginx配置stream模塊根據(jù)客戶端IP地址動態(tài)轉(zhuǎn)發(fā)TCP請求至不同后端服務(wù)器節(jié)點,適用于數(shù)據(jù)庫代理、TCP服務(wù)負(fù)載均衡及地域或來源IP分流的流量調(diào)度等場景,本文給大家介紹Nginx 實現(xiàn) TCP/DUP流量按 IP 動態(tài)轉(zhuǎn)發(fā)的操作
    2024-10-10
  • 一文了解nginx HTTP安全響應(yīng)問題

    一文了解nginx HTTP安全響應(yīng)問題

    一些網(wǎng)站系統(tǒng)會經(jīng)常遭到各類XSS攻擊、點劫持等,從而造成重要信息的泄露以及服務(wù)器安全問題,本文就來介紹一下,感興趣的可以了解一下
    2023-11-11
  • nginx https 443端口配置的方法

    nginx https 443端口配置的方法

    本文主要介紹了nginx https 443端口配置的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-03-03

最新評論