如何在本地部署vue+springboot先後端分離應用

今天想在windows本地搭建一個服務器跑整個vue+springboot項目，但始終訪問不到後端接口，網上介紹這方面的博客也不多，如今我將個人搭建過程與你們分享一下。

 

咱們知道，在平時的開發過程當中，將springboot服務啓動後，而後用npm run dev將前端項目運行起來，這樣整個項目就跑起來了，在瀏覽器中就能夠看到效果。這是由於node.js起了一個代理服務器的做用。但在服務器中vue項目是用npm run build打包出來的dist目錄，那要怎麼部署呢？

 

（1）首先下載安裝nginx看成前端靜態資源服務器和反向代理服務器；

（2）將npm run build出來的dist目錄中的index.html和static目錄拷貝至nginx中html目錄下，會覆蓋原有的index.html；

（3）用mvn clean package將springboot後端項目打包，會在target目錄下出現一個終極.jar文件；

（4）進入target目錄，用java -jar ****.jar運行後端項目，由於springboot是默認繼承了web容器的，因此不用另外安裝tomcat了；

（5）這時在瀏覽器中訪問localhost就能夠看到index.html頁面了，可是訪問後端接口會報404；

（6）這就要改下nginx的配置文件了，在nginx.conf文件中的server下新增location /api/ {proxy_pass http://192.168.1.19:9090/;}   這裏要注意/的多少問題，很容易出錯；

（7）另外轉發到後端接口時不要寫http://localhost，必定要寫http://ip地址，否則會有莫名其妙的錯誤，並且很難發現。

 

另外修改了nginx的配置文件後先把nginx的進程結束掉，而後進入nginx目錄，start nginx，  ./nginx -s reload

 

這樣一個vue+springboot服務器就搭建起來了。