部署vue+Springboot前后端分离项目的步骤实现


Posted in Javascript onMay 31, 2020

单页应用

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前后端分离内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
删除节点的jquery代码
Jan 13 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
JQuery获得内容和属性方法解析
May 30 #jQuery
JavaScript Window浏览器对象模型原理解析
May 30 #Javascript
基于canvasJS在PHP中制作动态图表
May 30 #Javascript
jQuery实现视频展示效果
May 30 #jQuery
vue实现购物车加减
May 30 #Javascript
基于vue和bootstrap实现简单留言板功能
May 30 #Javascript
JS常见内存泄漏及解决方案解析
May 30 #Javascript
You might like
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
在普通HTTP上安全地传输密码
2007/07/21 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
会计专业的自荐信
2013/12/12 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
公司接待方案
2014/03/08 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
长城导游词
2015/01/30 职场文书
小学教师求职信范文
2015/03/20 职场文书
会议营销主持词
2015/07/03 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js