當前位置：首頁 > server > anz > 詳細頁面

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

時間：2023-03-01來源：系統城裝機大師作者：佚名

Nginx部署Vue項目

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

其實使用Nginx就可以輕松的做到，并且實現請求轉發等功能。下面來看看使用步驟吧。

使用Nignx部署Vue項目步驟

1.打包Vue項目

1	`npm run build`

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

這里面存放的是已經打包好的靜態資源文件。

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

不同的項目結構不一樣哦。我使用的是vue-element-admin框架。具體打包方法可以查看框架的相關文檔哦。

2.復制dist文件夾到Vue默認目錄

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

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

復制完成后，雙擊nginx.exe運行nginx就可以運行啦。

3.高級配置

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55 server {
# 需要被監聽的端口號，前提是此端口號沒有被占用，否則在重啟 Nginx 時會報錯
listen 8888;
# 服務名稱，無所謂
server_name localhost;

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

client_max_body_size 20m;
client_body_buffer_size 128k;

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

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

# 關鍵步驟，這里表示將所有的 http://192.168.7.8:8888/teamnote/api/ 開頭的請求都轉發到下面 proxy_pass 指定的鏈接中
# 這里使用 /teamnote/api/ 而不是 /teamnote/ ，是因為前端項目本身的訪問鏈接就是 http:192.168.7.8:8888/teamnote/
# 為了防止在訪問頁面時請求就被 Nginx 代理轉發，這里需要更具體的配置，才能和前端訪問請求區分開
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;
}
}