?前言

---

?

常用的部署方式有兩種：

1.是把生成好的靜態(tài)頁(yè)面放到spring boot的static目錄下，與打包后的spring boot項(xiàng)目一起發(fā)布，當(dāng)spring boot運(yùn)行起來(lái)后，自然而然就能訪問(wèn)到靜態(tài)頁(yè)面文件了。

這種方法比較簡(jiǎn)單，適用于非常小型的系統(tǒng)。優(yōu)點(diǎn)是：不需要復(fù)雜的配置。而缺點(diǎn)也很明顯：需要兩者一同發(fā)布。我在這里就不做贅述了。

2.是通過(guò)http服務(wù)器發(fā)布，本文以nginx為例，重點(diǎn)介紹這種方式。

?

一、生成靜態(tài)頁(yè)面

---

?

運(yùn)行npm run build

?

生成的頁(yè)面文件在dist目錄下：

二、配置nginx

---

?

?

windows系統(tǒng)下載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;# 靜態(tài)文件夾路徑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;# 后端urlproxy_pass http://localhost:18080/;}} }

　　

其中，root項(xiàng)目是配置靜態(tài)網(wǎng)頁(yè)文件所在的路徑，配置成你自己的目錄。

location是配置spring boot項(xiàng)目跨域，這里我配置了當(dāng)匹配到有“/api/”開(kāi)頭的請(qǐng)求，就會(huì)轉(zhuǎn)到spring boot的項(xiàng)目中處理。?

?

運(yùn)行效果如下圖所示：

?

?

?

訪問(wèn)nginx的地址，就能訪問(wèn)到之前生成的靜態(tài)頁(yè)面和spring boot的后端。

而這就是前后端分離開(kāi)發(fā)的魅力所在。

?

返回目錄

?

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

?

如果你覺(jué)得我的博客對(duì)你有幫助，可以給我點(diǎn)兒打賞，左側(cè)微信，右側(cè)支付寶。

有可能就是你的一點(diǎn)打賞會(huì)讓我的博客寫(xiě)的更好:)

總結(jié)

以上是生活随笔為你收集整理的spring boot + vue + element-ui全栈开发入门——项目部署的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。