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

您的位置:首頁技術文章
文章詳情頁

部署vue+Springboot前后端分離項目的步驟實現

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

單頁應用

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工程

部署vue+Springboot前后端分離項目的步驟實現

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

部署vue+Springboot前后端分離項目的步驟實現

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

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

部署vue+Springboot前后端分離項目的步驟實現

前端頁面部署

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

部署vue+Springboot前后端分離項目的步驟實現

然后打開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 &

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

部署vue+Springboot前后端分離項目的步驟實現

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

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

標簽: Spring
相關文章:
主站蜘蛛池模板: 南京办公用品网-办公文具用品批发-打印机耗材采购 | 浙江自考_浙江自学考试网 | NBA直播_NBA直播免费观看直播在线_NBA直播免费高清无插件在线观看-24直播网 | 奶茶加盟,奶茶加盟店连锁品牌-甜啦啦官网 | 咖啡加盟,咖啡店加盟连锁品牌-卡小逗| 天津散热器_天津暖气片_天津安尼威尔散热器制造有限公司 | 土壤检测仪器_行星式球磨仪_土壤团粒分析仪厂家_山东莱恩德智能科技有限公司 | 挤出熔体泵_高温熔体泵_熔体出料泵_郑州海科熔体泵有限公司 | 高精度电阻回路测试仪-回路直流电阻测试仪-武汉特高压电力科技有限公司 | 南京兰江泵业有限公司-水解酸化池潜水搅拌机-絮凝反应池搅拌机-好氧区潜水推进器 | 保镖公司-私人保镖-深圳保镖公司【环宇兄弟保镖】 | 紫外线老化试验箱_uv紫外线老化试验箱价格|型号|厂家-正航仪器设备 | 定制奶茶纸杯_定制豆浆杯_广东纸杯厂_[绿保佳]一家专业生产纸杯碗的厂家 | 二次元影像仪|二次元测量仪|拉力机|全自动影像测量仪厂家_苏州牧象仪器 | 依维柯自动挡房车,自行式国产改装房车,小型房车价格,中国十大房车品牌_南京拓锐斯特房车 - 南京拓锐斯特房车 | 单螺旋速冻机-双螺旋-流态化-隧道式-食品速冻机厂家-广州冰泉制冷 | 国际金融网_每日财经新资讯网 | 论文查重_免费论文查重_知网学术不端论文查重检测系统入口_论文查重软件 | 魔方网-培训咨询服务平台| 南京技嘉环保科技有限公司-杀菌除臭剂|污水|垃圾|厕所|橡胶厂|化工厂|铸造厂除臭剂 | 电磁铁_推拉电磁铁_机械手电磁吸盘电磁铁厂家-广州思德隆电子公司 | 石家庄网站建设|石家庄网站制作|石家庄小程序开发|石家庄微信开发|网站建设公司|网站制作公司|微信小程序开发|手机APP开发|软件开发 | 东莞螺丝|东莞螺丝厂|东莞不锈钢螺丝|东莞组合螺丝|东莞精密螺丝厂家-东莞利浩五金专业紧固件厂家 | 短信通106短信接口验证码接口群发平台_国际短信接口验证码接口群发平台-速度网络有限公司 | 数码管_LED贴片灯_LED数码管厂家-无锡市冠卓电子科技有限公司 | 雪花制冰机(实验室雪花制冰机)百科 | 流量卡中心-流量卡套餐查询系统_移动电信联通流量卡套餐大全 | 圆盘鞋底注塑机_连帮鞋底成型注塑机-温州天钢机械有限公司 | 高压管道冲洗清洗机_液压剪叉式升降机平台厂家-林君机电 | 沥青车辙成型机-车托式混凝土取芯机-混凝土塑料试模|鑫高仪器 | 浙江皓格药业有限公司| 天坛家具官网| 双能x射线骨密度检测仪_dxa骨密度仪_双能x线骨密度仪_品牌厂家【品源医疗】 | 塑料造粒机「厂家直销」-莱州鑫瑞迪机械有限公司 | 节流截止放空阀-不锈钢阀门-气动|电动截止阀-鸿华阀门有限公司 | 建筑资质代办-建筑企业资质代办机构-建筑资质代办公司 | 牛奶检测仪-乳成分分析仪-北京海谊 | 机器视觉检测系统-视觉检测系统-机器视觉系统-ccd检测系统-视觉控制器-视控一体机 -海克易邦 | 大米加工设备|大米加工机械|碾米成套设备|大米加工成套设备-河南成立粮油机械有限公司 | 深圳APP开发_手机软件APP定制外包_小程序开发公司-来科信 | 校服厂家,英伦校服定做工厂,园服生产定制厂商-东莞市艾咪天使校服 |