电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

部署vue+Springboot前后端分離項目的步驟實現(xiàn)

瀏覽:43日期:2023-01-17 10:09:45

單頁應(yīng)用

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

前端頁面打包

打開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工程服務(wù)配置 open: true, proxy: { // 代理配置,將請求轉(zhuǎn)發(fā)到后臺的接口 ’/api’: {target: ’http://www.ccocc.co’,changeOrigin: true, // 開啟跨域ws: true,pathRewrite: { ’^/api’: ’’ // 重寫路徑} } } }}

然后在控制臺中輸入命令,npm run build

等待webpack為我們打包vue工程

部署vue+Springboot前后端分離項目的步驟實現(xiàn)

打包完成后會在根目錄下生成我們剛剛指定的文件夾:dist

部署vue+Springboot前后端分離項目的步驟實現(xiàn)

打開文件夾,目錄是這樣的:

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

部署vue+Springboot前后端分離項目的步驟實現(xiàn)

前端頁面部署

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

部署vue+Springboot前后端分離項目的步驟實現(xiàn)

然后打開nginx的配置文件,寫入以下配置:

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;}# 配置后端的接口,將訪問域名/api的路徑代理給我們后端的接口 location /api{ proxy_pass http://127.0.0.1:9786; # 本地加后端項目的端口號}# 重寫nginx默認(rèn)歡迎頁面 location /{ root /root/zcj/data/dist; # dist文件的絕對路徑,因為登陸到服務(wù)器上的用戶都是root,而root權(quán)限用戶的根目錄都是/root index index.html index.htm; # 文件名稱,格式 try_files $uri $uri/ /index.html; # 重定向} }

后端項目部署

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

在命令行輸入命令:在后臺運行我們的springboot項目,并且輸出日志到指定的日志文件

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

然后去云服務(wù)器的控制臺,將后端端口的安全組打開。

部署vue+Springboot前后端分離項目的步驟實現(xiàn)

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

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

標(biāo)簽: Spring
相關(guān)文章:
主站蜘蛛池模板: 离子色谱自动进样器-青岛艾力析实验科技有限公司 | 高扬程排污泵_隔膜泵_磁力泵_节能自吸离心水泵厂家-【上海博洋】 | 长沙发电机-湖南发电机-柴油发电机供应厂家-长沙明邦智能科技 | 阳光1号桔柚_无核沃柑_柑橘新品种枝条苗木批发 - 苧金网 | 正压密封性测试仪-静态发色仪-导丝头柔软性测试仪-济南恒品机电技术有限公司 | 杭州成人高考_浙江省成人高考网上报名| Boden齿轮油泵-ketai齿轮泵-yuken油研-无锡新立液压有限公司 | 安平县鑫川金属丝网制品有限公司,声屏障,高速声屏障,百叶孔声屏障,大弧形声屏障,凹凸穿孔声屏障,铁路声屏障,顶部弧形声屏障,玻璃钢吸音板 | 塑料薄膜_PP薄膜_聚乙烯薄膜-常州市鑫美新材料包装厂 | 齿轮减速机_齿轮减速电机-VEMT蜗轮蜗杆减速机马达生产厂家瓦玛特传动瑞环机电 | 雄松华章(广州华章MBA)官网-专注MBA/MPA/MPAcc/MEM辅导培训 | 定时排水阀/排气阀-仪表三通旋塞阀-直角式脉冲电磁阀-永嘉良科阀门有限公司 | 挨踢网-大家的导航! | 电子元器件呆滞料_元器件临期库存清仓尾料_尾料优选现货采购处理交易商城 | 石牌坊价格石牌坊雕刻制作_石雕牌坊牌楼石栏杆厂家_山东嘉祥石雕有限公司 | 仿真茅草_人造茅草瓦价格_仿真茅草厂家_仿真茅草供应-深圳市科佰工贸有限公司 | 聚合甘油__盐城市飞龙油脂有限公司 | 合肥弱电工程_安徽安防工程_智能化工程公司-合肥雷润 | 法兰螺母 - 不锈钢螺母制造厂家 - 万千紧固件--螺母街 | 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | ALC墙板_ALC轻质隔墙板_隔音防火墙板_轻质隔墙材料-湖北博悦佳 | 隐形纱窗|防护纱窗|金刚网防盗纱窗|韦柏纱窗|上海青木装潢制品有限公司|纱窗国标起草单位 | 北京律师咨询_知名专业北京律师事务所_免费法律咨询 | 深圳活动策划公司|庆典策划|专业公关活动策划|深圳艺典文化传媒 重庆中专|职高|技校招生-重庆中专招生网 | 蓝莓施肥机,智能施肥机,自动施肥机,水肥一体化项目,水肥一体机厂家,小型施肥机,圣大节水,滴灌施工方案,山东圣大节水科技有限公司官网17864474793 | 技德应用| 移动机器人产业联盟官网| 绿叶|绿叶投资|健康产业_绿叶投资集团有限公司 | 中图网(原中国图书网):网上书店,尾货特色书店,30万种特价书低至2折! | 紧急泄压人孔_防爆阻火器_阻火呼吸阀[河北宏泽石化] | 郑州爱婴幼师学校_专业幼师培训_托育师培训_幼儿教育培训学校 | 苗木价格-苗木批发-沭阳苗木基地-沭阳花木-长之鸿园林苗木场 | 洗地机-全自动/手推式洗地机-扫地车厂家_扬子清洁设备 | SEO网站优化,关键词排名优化,苏州网站推广-江苏森歌网络 | 石英粉,滑石粉厂家,山东滑石粉-莱州市向阳滑石粉有限公司 | 手持式3d激光扫描仪-便携式三维立体扫描仪-北京福禄克斯 | 档案密集架,移动密集架,手摇式密集架,吉林档案密集架-厂家直销★价格公道★质量保证 | 手持式3d激光扫描仪-便携式三维立体扫描仪-北京福禄克斯 | 电动卫生级调节阀,电动防爆球阀,电动软密封蝶阀,气动高压球阀,气动对夹蝶阀,气动V型调节球阀-上海川沪阀门有限公司 | 颚式破碎机,圆锥破碎机,制砂机-新乡市德诚机电制造有限公司 | (中山|佛山|江门)环氧地坪漆,停车场地板漆,车库地板漆,聚氨酯地板漆-中山永旺地坪漆厂家 |