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

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 */
new Vue({
  el: '#app',
  render: h => h(App),
  router,
  components: { App },
  template: '<App/>',
  axios
})

4.2 配置路由

打开@/router/index.js，如果是生产环境，将mode的值改为history，如果是正式环境(即打包后)，将mode的值改为hash

import Vue from 'vue'
import Router from 'vue-router'

import RouterPlan from '@/router/url/plan/RouterPlan' // 路由文件的存放路径随意
import RouterCalendar from '@/router/url/calendar/RouterCalendar'

import Planlist from '@/components/plan/list' //直接配置路由及别名

Vue.use(Router)

// 暴露路由
export default new Router({
  mode: 'hash', // 生产环境:history  正式环境：hash
  routes: [
    { path: '/plan/list', name: '计划列表', component: Planlist }, // 直接配置路由
    ...RouterPlan, // 引入配置文件
    ...RouterCalendar
  ]
})

路由配置文件结构

import PlanAdd from '@/components/plan/add'
import PlanDetail from '@/components/plan/detail'
import PlanEdit from '@/components/plan/edit'
import Planlist from '@/components/plan/list'
const routes = [
  { path: '/plan/list', name: '计划列表', component: Planlist },
  { path: '/plan/add', name: '添加计划', component: PlanAdd },
  { path: '/plan/edit', name: '修改计划', component: PlanEdit },
  { path: '/plan/detail', name: '计划详情', component: PlanDetail }
]
export default routes

4.3 生产环境实现跨域请求

打开@/config/index.js，配置proxyTable

    proxyTable: {
      '/api': {
        target: 'http://local.cn:8083',// 后端服务器url
        changeOrigin: true,// 是否允许跨域
        pathRewrite: {
          '/api': ''
        }
      }
    },

如下图

4.4. 正式环境部署并实现跨域

4.4.1. 修改路由配置

打开@/router/index.js，将mode的值改为hash

import Vue from 'vue'
import Router from 'vue-router'

import RouterPlan from '@/router/url/plan/RouterPlan' // 路由文件的存放路径随意
import RouterCalendar from '@/router/url/calendar/RouterCalendar'

import Planlist from '@/components/plan/list' //直接配置路由及别名

Vue.use(Router)

// 暴露路由
export default new Router({
  mode: 'hash', // 生产环境:history  正式环境：hash
  routes: [
    { path: '/plan/list', name: '计划列表', component: Planlist }, // 直接配置路由
    ...RouterPlan, // 引入配置文件
    ...RouterCalendar
  ]
})

4.4.2. vue项目打包

进入项目根目录，执行以下代码npm run build,编译成功如下：

进入@/dist,复制所有文件(static文件夹及index.html文件)到服务器的指定目录下

5. nginx反向代理

使用nginx最大的好处：服务器不需要暴露过多的接口。
安装nginx

5.1 反向代理后端项目

进入nginx主目录，打开@/conf/nginx.conf，添加以下配置
（注：如果后端代码不需要暴露，也可以不进行反向代理的配置）

   server {
        listen      80; # 服务器向外界暴露的接口
        server_name plan.ubuntu.cn; # 浏览器请求的url
        location / {
            proxy_pass http://127.0.0.1:3000/;# 实际访问的项目地址
        }
        error_page  500 502 503 504  /50x.html;
        location = /50x.html {
            root  html;
        }
    }

5.2 解决前端跨域请求后端的问题

需要实现前端页面的代理以及后端跨域请求的代理

  server {
    listen 80;
    server_name vue.ubuntu.cn;

  # 注意设定 root路径是有dist的
    location / {
      root /usr/local/webapps/vue/plan; # 打包后的项目存放的路径
      index /index.html; # 默认请求的页面
    }

  #跨域 ip和port自行替换
    location /api/ { # 跨域模拟的接口 注：api后面需要`/`
      proxy_pass http://127.0.0.1:8083/; # 实现跨域
    }
}

@config/index.js里的api与nginx里的/api/必须相同。且api/后面必须有/，否则路由的拼接会出错（demo:http://baidu.com/test变为http://baidu.comtest）