部署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 相关文章推荐
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
javascript表单事件处理方法详解
May 15 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
js实现查询商品案例
Jul 22 Javascript
JS实现放大镜效果
Sep 21 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
js cookies实现简单统计访问次数
2009/11/24 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
React实现全选功能
2020/08/25 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
python中去空格函数的用法
2014/08/21 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python3标准库总结
2019/02/19 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
Otel.com:折扣酒店预订
2017/08/24 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
护士毕业生自荐信
2014/02/07 职场文书
旅游节目策划方案
2014/05/26 职场文书
园林系毕业生求职信
2014/06/23 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
机器人总动员观后感
2015/06/09 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
详解Oracle块修改跟踪功能
2021/11/07 Oracle