springboot+vue的前後端分離部署（詳細）

方法一：前後端分開部署

一、前端部署

1、下載 nginx，官方網址如下：

http://nginx.org/en/download.html

2、解壓安裝包到任意目錄

3、打開前端項目，執行npm run build

4、進入本地項目的dist目錄，把裏面的文件都複製

5、然後把它直接拷貝進nginx\html 下（注意：需要覆蓋掉nginx\html 下的index.html）

6、配置一下服務器的默認端口，打開 nginx\conf\nginx.conf，找到 server 的配置處，然後按照下圖來更改：

7、配置完成後，運行 nginx 根目錄下的 nginx.exe （會出現命令窗口一閃而過，說明啓動了），訪問 http://localhost:8081/ 。到此，前端部署完成，接下來到後端。

---

二、後端部署

1、首先打開後端項目的pom.xml，修改 標籤裏的 war 爲 jar

2、在後端項目的終端輸入mvn install

3、在這裏，可能會報錯，說mvn不是可執行的命令，原因是沒有將maven配置爲全局環境變量。

這時，需給maven配置環境變量。
1.在桌面我的電腦處，右鍵選擇 屬性
2.選擇高級系統設置

3.環境變量

4.
6.選擇新建，然後輸入你安裝的maven的路徑，一直到\bin目錄，點擊確定。

4、再回到後端項目輸入mvn install

5、程序執行完成，在項目的 target 文件夾下就會出現我們的 jar 包

6、先在控制檯cd 到 target目錄下，然後執行 java -jar wj-0.0.1-SNAPSHOT.jar （注意名稱）。

7、測試一下http://localhost:8443/api/XXX,沒報錯。到這，後端也部署成功了。可以去前端的端口使用後端了。

---

方法二：把前端整合到後端再部署

1、把方法一中list文件夾下的靜態文件都拷貝到後端項目的./static目錄下。

2、把pom裏的jar改爲war

3、再在pom中添加兩個依賴

<!-- springboot tomcat 支持 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>

<!-- mvn 打包依賴 -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <configuration>
                    <skip>true</skip>
                </configuration>
            </plugin>

4、在控制檯輸入mvn insatll即可

5、配置tomcat

修改端口號

到此，就啓動完成了！

部署這遇到了好多坑啊，東查查西查查，纔算把項目前後端都部署了，java路漫漫，繼續前進！如果你覺得這篇文章對你有幫助，請給我個贊吧！