spring boot + vue + element-ui全棧開發入門——專案部署

冬子哥發表於2018-02-09
Spring BootVueUI全棧

 前言

 

常用的部署方式有兩種：

1.是把生成好的靜態頁面放到spring boot的static目錄下，與打包後的spring boot專案一起釋出，當spring boot執行起來後，自然而然就能訪問到靜態頁面檔案了。

這種方法比較簡單，適用於非常小型的系統。優點是：不需要複雜的配置。而缺點也很明顯：需要兩者一同釋出。我在這裡就不做贅述了。

2.是透過http伺服器釋出，本文以nginx為例，重點介紹這種方式。

 

一、生成靜態頁面

 

執行npm run build

 

生成的頁面檔案在dist目錄下：

二、配置nginx

 

 

windows系統下載nginx：http://nginx.org/en/download.html

 

 

下載完解壓後，找到conf/nginx.conf檔案，並修改：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    server {
        listen       80;
        server_name  localhost;

        # 靜態資料夾路徑
        root  你的路徑;
        index  index.html index.htm;

        # 後端配置
        location /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;
            　　　　　　　# 後端url
        		proxy_pass http://localhost:18080/;
        }
    }
}

　　

其中，root專案是配置靜態網頁檔案所在的路徑，配置成你自己的目錄。

location是配置spring boot專案跨域，這裡我配置了當匹配到有“/api/”開頭的請求，就會轉到spring boot的專案中處理。 

 

執行效果如下圖所示：

 

 

 

訪問nginx的地址，就能訪問到之前生成的靜態頁面和spring boot的後端。

而這就是前後端分離開發的魅力所在。

 

返回目錄

 

git程式碼地址：https://github.com/carter659/spring-boot-vue-element.git

 

如果你覺得我的部落格對你有幫助，可以給我點兒打賞，左側微信，右側支付寶。

有可能就是你的一點打賞會讓我的部落格寫的更好:)

相關文章