單頁應用

vue經常被用來開發單頁應用（SinglePage Web Application，SPA）,什麼叫做單頁應用呢，也就是隻有一張web頁面的應用，單頁應用的跳轉只需要重新整理區域性資源，大大加快的了我們頁面的響應速度

前端頁面打包

開啟vue工程，在專案根目錄下建立一個配置檔案：vue.config.js,然後在裡面寫入以下內容：

module.exports = {
  assetsDir: 'static',// 靜態資源儲存路徑
  outputDir: 'dist',// 打包後生成的資料夾
  lintOnSave: false,productionSourceMap: false,// 取消錯誤日誌
  runtimeCompiler: true,// 實時編譯
  chainWebpack: () => { }
  },devServer: { // vue工程服務配置
    open: true,proxy: { // 代理配置，將請求轉發到後臺的介面
      '/api': {
        target: 'http://www.ccocc.co',changeOrigin: true,// 開啟跨域
        ws: true,pathRewrite: {
          '^/api': '' // 重寫路徑
        }
      }
    }
  }
}

然後在控制檯中輸入命令，npm run build

等待webpack為我們打包vue工程

打包完成後會在根目錄下生成我們剛剛指定的資料夾：dist

開啟資料夾，目錄是這樣的：

css儲存我們書寫的css程式碼，js儲存我們書寫的js程式碼，整個工程濃縮為一個index.html頁面，何為單頁，這就是單頁。

前端頁面部署

把打包好的dist資料夾上傳到伺服器，隨便選一個位置：

然後開啟nginx的配置檔案，寫入以下配置：

server {
    listen  80; # nginx的預設埠
    server_name www.ccocc.co; # 你的域名
		
		# 關閉預設的logo
    location = /favicon.ico{ 
    log_not_found off;
    access_log off;

}
		# 配置後端的介面，將訪問域名/api的路徑代理給我們後端的介面
    location /api{
    proxy_pass http://127.0.0.1:9786; # 本地加後端專案的埠號
}
		# 重寫nginx預設歡迎頁面
    location /{
    root /root/zcj/data/dist; # dist檔案的絕對路徑，因為登陸到伺服器上的使用者都是root，而root許可權使用者的根目錄都是/root
    index index.html index.htm; # 檔名稱，格式
    try_files $uri $uri/ /index.html; # 重定向
} 

}

後端專案部署

在上面我們都把配置檔案寫好了，所以我們只要直接打包工程以及上傳到伺服器再啟動就行了。

在命令列輸入命令：
在後臺執行我們的springboot專案，並且輸出日誌到指定的日誌檔案

nohup java -jar fatNerdTimeTrack.jar >myfatLog.log 2>&1 &

然後去雲伺服器的控制檯，將後端埠的安全組開啟。

到這。我們整個前後端分離的專案就部署成功了。

到此這篇關於部署vue+Springboot前後端分離專案的步驟實現的文章就介紹到這了,更多相關vue+Springboot前後端分離內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！