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

单页应用

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

打包完成后会在根目录下生成我们刚刚指定的文件夹：dist

打开文件夹，目录是这样的：

css保存我们书写的css代码，js保存我们书写的js代码，整个工程浓缩为一个index.html页面，何为单页，这就是单页。

前端页面部署

把打包好的dist文件夹上传到服务器，随便选一个位置：

然后打开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前后端分离内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法

    SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法

    当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助.本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究.另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开

  • vue+springboot前后端分离工程跨域问题解决方案解析

    假如是在同一台机器上开发,前后端分离的工程中出现跨域问题的原因是,前端工程和后端工程运行在不同的端口上.只要协议.域名.端口有一个不同就会产生跨域问题,所以在前端工程中请求后端的接口时就会因为端口不同而产生跨域问题. 一.解决跨域的原理 假设前端A要去访问服务器C,可以在A和C之间之间设置一个代理B,A访问C时先访问B,再由B代为请求C并把请求结果返回给A,这样就可以解决跨域问题.其中需要保证的是A访问B和B访问C都不能存在跨域. 二.使用vue自带的proxyTable: proxyTable

  • 解决前后端分离 vue+springboot 跨域 session+cookie失效问题

    环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查.后续请求取出的用户都为null. 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了.然后发现cookie浏览器不能自动保存,服务器响应set-cookie了 搜索问题,发现跨域,服务器响应的setCookie浏览器无

  • SpringBoot+Vue.js实现前后端分离的文件上传功能

    这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目. 后端项目搭建 我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可 项目创建成功后,maven的pom配置如下 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> &l

  • 详解springboot和vue前后端分离开发跨域登陆问题

    前后端分离开发中,一般都会遇到请求跨域问题.而且一般也会遇到登陆失效问题.今天就以springboot和vue为例来看如何解决上述问题 增加过滤器 @WebFilter @Component public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,

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

    单页应用 vue经常被用来开发单页应用(SinglePage Web Application,SPA),什么叫做单页应用呢,也就是只有一张web页面的应用,单页应用的跳转只需要刷新局部资源,大大加快的了我们页面的响应速度 前端页面打包 打开vue工程,在项目根目录下创建一个配置文件:vue.config.js,然后在里面写入以下内容: module.exports = { assetsDir: 'static', // 静态资源保存路径 outputDir: 'dist', // 打包后生成的文

  • SpringBoot+mybatis+Vue实现前后端分离项目的示例

    SpringBoot+mybatis+Vue实现前后端分离项目的示例

    目录 一.SpringBoot环境搭建 1.项目的数据库 2.项目所需依赖 3.application.yml文件 4.入口类 二.vue实现前后端分离 1.前端页面 2.springBoot控制层 3.mapper文件 4.项目完整源代码 vue前后端分离实现功能:员工的增删改(先实现数据回显之后,再进行修改)查 一.SpringBoot环境搭建 1.项目的数据库 /* Navicat Premium Data Transfer Source Server : windows Source S

  • Vue+SpringBoot前后端分离中的跨域问题

    Vue+SpringBoot前后端分离中的跨域问题

    在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不便. 封装api请求 import axios from 'axios' //axios.create创建一个axios实例,并对该实例编写配置,后续所有通过实例发送的请求都受当前配置约束 const $http = axios.create({ baseURL: '', timeout: 1000

  • IDEA教程创建SpringBoot前后端分离项目示例图解

    IDEA教程创建SpringBoot前后端分离项目示例图解

    目录 创建springboot项目 测试项目 按照MVC格式创建数据库项目 总结 springboot就是简化Spring应用中的初始化配置,快速创建项目而生的. 创建springboot项目 代开idea,点击File->New->Project,弹出如下对话框 输入组织.工程名,选择maven工程,注意:java版本号选择8 可以根据自己项目的需求选择依赖包,系统会自动将这些依赖包写入maven的pom文件,如下选择Spring Web.myBtias.mySQL驱动等.无需担心漏掉依赖包

  • springBoot前后端分离项目中shiro的302跳转问题

    springBoot前后端分离项目shiro的302跳转 项目是使用的springboot ,使用的shiro做的用户鉴权.在前端请求时当用户信息失效,session失效的时候,shiro会重定向到配置的login.jsp 页面,或者是自己配置的logUrl. 因是前后端分离项目,与静态资源文件分离,固重定向后,接着会404. 经过查找网上配置资料,发现302原因是 FormAuthenticationFilter中onAccessDenied 方法做了相应处理.那知道问题所在,就可以有解决方了

  • Springboot前后端分离项目配置跨域实现过程解析

    项目登录流程如下 用户进入前端登录界面,输入账号密码等,输入完成之后前端发送请求到后端(拦截器不会拦截登录请求),后端验证账号密码等成功之后生成Token并存储到数据库,数据库中包含该Token过期时间,然后返回生成的Token到前端. 前端收到Token,表示登录成功,把这个Token存储本地.然后跳转到用户中心页面,用户中心页面在ajax的请求头中带上Token,跟随请求用户数据接口一起带到后端. 后端通过拦截器拦截到这个请求,去判断这个Token是否有效,有效就放过去做他该做的事情,无效就

  • SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(前端篇)

    SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(前端篇)

    后端篇 SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建[后端篇][快速生成后端代码.封装结果集.增删改查.模糊查找][毕设基础框架] 前端篇 创建vue项目 1.找个文件夹进入命令行,输入:vue create vue-front 2.直接回车,等待片刻,稍微有点小久 3.根据提示指令测试 打开浏览器输入:http://localhost:8080/ 安装所需工具 安装的工具会有点多,为了提供更好的拓展性,可以自主选择安装(不建议),后面的代码中都是使用到了,不安装

  • SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(后端)

    SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(后端)

    数据库准备 data_test.sql: /* SQLyog Enterprise v12.08 (64 bit) MySQL - 5.7.31 : Database - data_test ********************************************************************* */ /*!40101 SET NAMES utf8 */; /*!40101 SET SQL_MODE=''*/; /*!40014 SET @OLD_UNIQUE_

随机推荐