部署vue+Springboot前后端分離項(xiàng)目的步驟實(shí)現(xiàn)
單頁(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; # 文件名稱(chēng),格式 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)!
相關(guān)文章:
1. Python獲取抖音關(guān)注列表封號(hào)賬號(hào)的實(shí)現(xiàn)代碼2. ajax請(qǐng)求添加自定義header參數(shù)代碼3. Python數(shù)據(jù)分析之pandas函數(shù)詳解4. 解決Python 進(jìn)程池Pool中一些坑5. php測(cè)試程序運(yùn)行速度和頁(yè)面執(zhí)行速度的代碼6. 無(wú)線標(biāo)記語(yǔ)言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁(yè)7. 三個(gè)不常見(jiàn)的 HTML5 實(shí)用新特性簡(jiǎn)介8. 使用.net core 自帶DI框架實(shí)現(xiàn)延遲加載功能9. php網(wǎng)絡(luò)安全中命令執(zhí)行漏洞的產(chǎn)生及本質(zhì)探究10. Warning: require(): open_basedir restriction in effect,目錄配置open_basedir報(bào)錯(cuò)問(wèn)題分析
