部署vue+Springboot前后端分離項目的步驟實現(xiàn)
單頁應用
vue經(jīng)常被用來開發(fā)單頁應用（SinglePage Web Application，SPA）,什么叫做單頁應用呢，也就是只有一張web頁面的應用，單頁應用的跳轉(zhuǎn)只需要刷新局部資源，大大加快的了我們頁面的響應速度
前端頁面打包
打開vue工程，在項目根目錄下創(chuàng)建一個配置文件：vue.config.js,然后在里面寫入以下內(nèi)容：
module.exports = {
assetsDir: 'static', // 靜態(tài)資源保存路徑
outputDir: 'dist', // 打包后生成的文件夾
lintOnSave: false,
productionSourceMap: false, // 取消錯誤日志
runtimeCompiler: true, // 實時編譯
chainWebpack: () => { }
},
devServer: { // vue工程服務配置
open: true,
proxy: { // 代理配置，將請求轉(zhuǎn)發(fā)到后臺的接口
'/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; # 你的域名
# 關(guān)閉默認的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權(quán)限用戶的根目錄都是/root
index index.html index.htm; # 文件名稱，格式
try_files $uri $uri/ /index.html; # 重定向
}
}
后端項目部署
在上面我們都把配置文件寫好了，所以我們只要直接打包工程以及上傳到服務器再啟動就行了。
在命令行輸入命令：
在后臺運行我們的springboot項目，并且輸出日志到指定的日志文件
nohup java -jar fatNerdTimeTrack.jar >myfatLog.log 2>&1 &
然后去云服務器的控制臺，將后端端口的安全組打開。
到這。我們整個前后端分離的項目就部署成功了。
到此這篇關(guān)于部署vue+Springboot前后端分離項目的步驟實現(xiàn)的文章就介紹到這了,更多相關(guān)vue+Springboot前后端分離內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue+freemarker中遇到的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端拖拽懸浮按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Vue3+element實現(xiàn)表格數(shù)據(jù)導出
這篇文章主要為大家學習介紹了Vue3如何利用element實現(xiàn)表格數(shù)據(jù)導出功能，文中的示例代碼講解詳細，感興趣的小伙伴快跟隨小編一起學習一下吧2023-07-07
這篇文章主要為大家介紹了Storybook?7.0?Beta?Vue3踩坑解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了vue?同局域網(wǎng)訪問不到的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue?使用addRoutes動態(tài)添加路由及刷新頁面跳轉(zhuǎn)404路由的問題解決方案
我自己使用addRoutes動態(tài)添加的路由頁面,使用router-link標簽可以跳轉(zhuǎn),但是一刷新就會自動跳轉(zhuǎn)到我定義的通配符?*?指向的404路由頁面,這說明沒有找到指定路由才跳到404路由的,這樣的情況如何處理呢,下面小編給大家分享解決方案,一起看看吧2023-10-10
這篇文章給大家介紹了基于vue封裝一個帶眼睛的密碼子組件的方法,文章中有詳細的代碼講解,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了一篇Vue、React重點詳解大全，文章內(nèi)容詳細，通過案例可以更好的理解其相關(guān)知識，需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了基于Vue.js的表格分頁組件使用方法，了解了Vue.js的特點，感興趣的朋友可以參考一下2016-05-05
這篇文章主要介紹了Vue如何將時間戳轉(zhuǎn)換日期格式,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09