1.做一個小系統，使用了springboot+vue 基礎框架參考這哥們的，直接拿過來用，鏈接https://github.com/smallsnail-wh/interest
前期的開發環境搭建就不說了，太多了，自己找吧。
2.發布部署
將開發好的前端vue代碼 執行 npm run build 默認會生成dist文件夾（里面都是一些js文件）+index.html文件，留着后面備用
nginx
nginx安裝好之后，start nginx.exe 直接啟動，在瀏覽器中輸入localhost出現如下信息代表安裝成功（默認是80端口可以省略，如果你修改成了其他端口，是要帶上端口號的）
將vue生成的dist文件夾和index.html整體拷貝到nginx/html下面，如圖
如果你的不是index.html文件名臣，需要在conf文件夾下的nginx.conf文件修改成相應的文件名，比如：我的就是index_prod.html
location / {
root html;
index index_prod.html index_prod.htm;//按照實際的文件名進行修改
}
再次輸入localhost就可以看到你開發的前端程序了。
后段tomcat，war包部署，
先將后段打成war包，放在tomcat下的webapps文件夾下（tomcat端口要跟開發時候的springboot端口保持一致）
server:
port: 8080//比如我的是8080
servlet:
context-path: /wh
將上述文件放進去之后，啟動tomcat，
瀏覽器重輸入localhost:8080/inform(war包名稱)/，出現未授權，是因為springboot有攔截器，出現下面的頁面就代表后端搭建完成。可以
至此，前后端都搭建完成啦，但是前端還是無法訪問后端的，因為nginx還需要一些設置
#context-path: /wh 這個wh是我在application.yml 下面servlet的配置信息
location /wh {
proxy_pass http://localhost:8080/inform;#這個一定要帶上你的war包名稱，不然無法訪問哦
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
# root html;
# index index.html index.htm;
}
Nginx 重新加載配置信息 nginx -s reload
再次訪問，登錄驗證，發現能夠成功連接前后端了。
然而登陸沒問題，登錄之后刷新瀏覽器，就會出現404的錯誤，加上這句try_files $uri $uri/ /index_prod.html; 就解決了
location / {
root html;
index index_prod.html index_prod.htm;
try_files $uri $uri/ /index_prod.html;
}
至此前后端部署完成
我的完成配置信息如下：
server {
listen 80;#前端端口
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index_prod.html index_prod.htm;
try_files $uri $uri/ /index_prod.html;#解決登錄之后刷新404
}
location /wh {
proxy_pass http://localhost:8080/inform;#前端能夠訪問到后端
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
# root html;
# index index.html index.htm;
}