單頁(yè)應(yīng)用

vue經(jīng)常被用來(lái)開(kāi)發(fā)單頁(yè)應(yīng)用（SinglePage Web Application，SPA）,什么叫做單頁(yè)應(yīng)用呢，也就是只有一張web頁(yè)面的應(yīng)用，單頁(yè)應(yīng)用的跳轉(zhuǎn)只需要刷新局部資源，大大加快的了我們頁(yè)面的響應(yīng)速度

前端頁(yè)面打包

打開(kāi)vue工程，在項(xiàng)目根目錄下創(chuàng)建一個(gè)配置文件：vue.config.js,然后在里面寫(xiě)入以下內(nèi)容：

module.exports = { assetsDir: ’static’, // 靜態(tài)資源保存路徑 outputDir: ’dist’, // 打包后生成的文件夾 lintOnSave: false, productionSourceMap: false, // 取消錯(cuò)誤日志 runtimeCompiler: true, // 實(shí)時(shí)編譯 chainWebpack: () => { } }, devServer: { // vue工程服務(wù)配置 open: true, proxy: { // 代理配置，將請(qǐng)求轉(zhuǎn)發(fā)到后臺(tái)的接口 ’/api’: {target: ’http://www.ccocc.co’,changeOrigin: true, // 開(kāi)啟跨域ws: true,pathRewrite: { ’^/api’: ’’ // 重寫(xiě)路徑} } } }}

然后在控制臺(tái)中輸入命令，npm run build

等待webpack為我們打包vue工程

打包完成后會(huì)在根目錄下生成我們剛剛指定的文件夾：dist

打開(kāi)文件夾，目錄是這樣的：

css保存我們書(shū)寫(xiě)的css代碼，js保存我們書(shū)寫(xiě)的js代碼，整個(gè)工程濃縮為一個(gè)index.html頁(yè)面，何為單頁(yè)，這就是單頁(yè)。

前端頁(yè)面部署

把打包好的dist文件夾上傳到服務(wù)器，隨便選一個(gè)位置：

然后打開(kāi)nginx的配置文件，寫(xiě)入以下配置：

server { listen 80; # nginx的默認(rèn)端口 server_name www.ccocc.co; # 你的域名# 關(guān)閉默認(rèn)的logo location = /favicon.ico{ log_not_found off; access_log off;}# 配置后端的接口，將訪問(wèn)域名/api的路徑代理給我們后端的接口 location /api{ proxy_pass http://127.0.0.1:9786; # 本地加后端項(xiàng)目的端口號(hào)}# 重寫(xiě)nginx默認(rèn)歡迎頁(yè)面 location /{ root /root/zcj/data/dist; # dist文件的絕對(duì)路徑，因?yàn)榈顷懙椒?wù)器上的用戶都是root，而root權(quán)限用戶的根目錄都是/root index index.html index.htm; # 文件名稱，格式 try_files $uri $uri/ /index.html; # 重定向} }

后端項(xiàng)目部署

在上面我們都把配置文件寫(xiě)好了，所以我們只要直接打包工程以及上傳到服務(wù)器再啟動(dòng)就行了。

在命令行輸入命令：在后臺(tái)運(yùn)行我們的springboot項(xiàng)目，并且輸出日志到指定的日志文件

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

然后去云服務(wù)器的控制臺(tái)，將后端端口的安全組打開(kāi)。

到這。我們整個(gè)前后端分離的項(xiàng)目就部署成功了。

到此這篇關(guān)于部署vue+Springboot前后端分離項(xiàng)目的步驟實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue+Springboot前后端分離內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！