Windows 11
nginx-1.20.0
"vue": "^3.4.21"
---
序章
vue3 開發,不需要後端服務業是可以的。
在需要後端服務時,使用 nginx 來轉發請求是很好的(個人開發者)。
注,還有什麼其它方式嗎?
注,本文的後端服務 是使用 Java 開發的 HTTP 接口。
注,參考資料#2 介紹了 多個 vue.js 3.0 項目的配置,本文則 多了 後端服務的配置。
架構圖
用戶 訪問 nginx;
nginx 轉發 vue.js 項目的文件(npm run build 後在 dist 目錄生成的);
nginx 轉發 後端請求到 Java 後端。
vue.js 3.0 項目編譯
執行 npm run build 命令,默認生成到 項目的 dist 目錄下:
注,SPA,單頁面應用。
啓動後端服務
Java 程序:
java -jar app.jar |
注,開發環境,就不用太麻煩了。
ben發佈於博客園
配置 nginx(重點)
http 節點下配置:
include D:/work/nginx-1.20.0/conf/servers/*.conf; include D:/work/nginx-1.20.0/conf/upstreams/*.conf; |
servers 下放置 服務器配置,不同域名、不同端口的服務器。
upstreams 下放置 後端服務 的 upstream 配置。
server 配置
servers 下建立 服務器的 conf 文件:localhost.conf
server {
listen 80;
listen [::]:80;
#server_name _;
# 關鍵1
root D:/code/tlprj/vue3prj/dist;
# Load configuration files for the default server block.
include D:/work/nginx-1.20.0/conf/default.d/*.conf;
location ^~ /app {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
# 關鍵2
proxy_pass http://server29001;
}
location ^~ /system {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
# 關鍵2
proxy_pass http://server29001;
}
# 關鍵3
# view 地址 跳轉到 首頁
location / {
try_files $uri $uri/ /index.html;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
關鍵1:
server.root 配置,指向 vue.js 3.0 項目的 dist目錄。
關鍵2:
轉發請求到後端的 Java 程序。
關鍵3:
在不同的 vue.js 視圖(View) 刷新時,放置返回到首頁。見 參考資料#1 的官方文檔介紹。
注意,
其中轉發 以 /app、/system 開頭的 兩類請求, 可以優化爲一個,後端服務統一前綴。
其中的 location 用的是【^~】,而不是 單獨的【~】。
upstream 配置
upstream server29001 {
server localhost:29001;
}
ben發佈於博客園
使用開發環境
啓動 nginx。
啓動後端服務——確保接口已開發完畢,可聯調、可發佈。
接下來,在 vue.js 3.0 項目盡情開發吧——好好調用後端接口。
徵求意見
在 vue.js 3.0 項目中,使用 npm run dev 命令 會啓動一個 端口爲5137 的web服務,可以訪問 Web項目。
在不使用 nginx 時,怎麼在 這種情況下 使用後端服務呢?
ben發佈於博客園
---END---
本文鏈接:
https://www.cnblogs.com/luo630/p/18166690
ben發佈於博客園
參考資料
1、vue router
其中有一個 頁面介紹 nginx 的 try_files 配置的。
2、手把手教 Nginx 部署 Vue 項目
2020-03-19
作者:狗尾巴花的尖
https://juejin.cn/post/6844904096973979662
3、【nginx】nginx之location規則詳解:
作者:Sun Peng
於 2023-07-25 22:45:44 發佈
版權聲明:本文爲博主原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接和本聲明。
https://blog.csdn.net/weixin_53791978/article/details/131927724
4、
ben發佈於博客園
ben發佈於博客園