spring boot + vue +nginx实现前后端分离

本文介绍了如何使用Spring Boot构建后端项目,Vue创建前端项目,并通过Nginx进行反向代理,实现前后端分离。详细步骤包括Spring Boot项目的jar包打包、Vue项目的配置与打包,以及Nginx配置解决跨域问题。
摘要由CSDN通过智能技术生成

1. 创建spring boot 后端项目

暂不编写,百度有很多教程

2. 创建vue 前端项目

暂不编写,百度有很多教程

3. spring boot 打包并部署到服务器

3.1 将项目设置为jar包

  1. 打开项目的pom.xml文件
    在这里插入图片描述
  2. 打包代码,进入项目的主目录,打开命令行,执行以下代码
    mvn clean && mvn package
  3. 进入target目录,复制项目名-版本号.jar到服务器指定目录下。执行以下代码启动(注:jar包的名称可以任意修改。)
    命令行直接启动后端项目java -jar 项目名-版本号.jar或使用静默启动$nohup java -jar 项目名-版本号.jar &

4. vue打包

说明: @表示项目的基准路径

4.1 项目引入基础配置

打开@/main.js,引入必要的配置,其中axios./router为必要的配置,其它的可根据自身的需求引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import resource from 'vue-resource'

import Moment from 'moment'
import axios from 'axios'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

// 绑定 moment 进行时间格式化 ✔
Vue.prototype.$moment = Moment // 赋值使用
Vue.prototype.$axios = axios // 跨域请求

//引入element-ui
Vue.use(ElementUI)

// 安装 路由(url)
Vue.use(router)

// 绑定 vue-resource(ajax)
Vue.use(resource)

/* eslint-disable no-new */
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值