vue.js 3 初學經驗：開發環境搭建，Windows，nginx

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

https://v3.router.vuejs.org

其中有一個 頁面介紹 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發佈於博客園