部署vue+Springboot前後端分離項目

單頁應用

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 &

然後去雲服務器的控制檯，將後端端口的安全組打開。

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