一、项目示例

1. 前端代码
   通用请求文件：request.js

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost:8888', // api的base_url
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  console.log("请求拦截");
  return config
}, error => {
  return Promise.reject(error);
})

// respone拦截器
service.interceptors.response.use(
  response => {
    console.log("响应拦截");
    return response;
  }, error => {
    return Promise.reject(error.response.data)
  })

export default service

接口文件：src\api\user.js

import request from '@/request'

/**
 * api接口调用
 */
export function getList() {
  return request({
    url: '/user',
    method: 'get'
  });
}

组件文件：src\views\Home.vue

<template>
  <div class="home">
    <ul>
      <li v-for="item in listData" :key="item.id">{{ item.username }}</li>
    </ul>
  </div>
</template>

<script>
import { getList } from "@/api/user.js";

export default {
  name: "home",
  components: {},
  data() {
    return { listData: [] };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getList().then(response => {
        this.listData = response.data;
      });
    }
  }
};
</script>

2. 后端代码

@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {
    @GetMapping
    public List<User> getList(){
        List<User> list=new ArrayList<>();
        User user1=new User();
        user1.setId(1);
        user1.setUsername("张三");
        user1.setAddress("山西省太原市");
        User user2=new User();
        user2.setId(2);
        user2.setUsername("李四");
        user2.setAddress("山西省长治市");
        list.add(user1);
        list.add(user2);
        return list;
    }
}

3. 请求测试

   
   请求测试

二、打包部署

1. Vue前端构建

D:\vue-test>npm run build

生成文件
生成文件
生成文件

构建成功后基本会在配置的dist文件下生成静态html文件。
使用rar压缩为zip包：

压缩为zip包

2. 静态代码上传到服务器

# 创建目录
[root@localhost ~]# mkdir /www
[root@localhost ~]# cd /www
# 上传文件
[root@localhost www]# rz
[root@localhost www]# ls
dist.zip

3. 解压 dist.zip

[root@localhost www]# yum install unzip
[root@localhost www]# unzip dist.zip 
Archive:  dist.zip
   creating: dist/
  inflating: dist/favicon.ico        
  inflating: dist/index.html         
   creating: dist/js/
  inflating: dist/js/app.c8df09f4.js  
  inflating: dist/js/app.c8df09f4.js.map  
  inflating: dist/js/chunk-vendors.a67bbf0a.js  
  inflating: dist/js/chunk-vendors.a67bbf0a.js.map  

4. Nginx 配置
   进入Nginx安装目录，修改 Nginx 的配置文件:

[root@localhost www]# cd /usr/local/nginx
[root@localhost nginx]# vi conf/nginx.conf
# root 映射到静态代码文件夹 44行
              location / {
                 # root   html;
                 # 指向解压后的路径
                  root /www/dist;
                  index  index.html index.htm;
              }

5. 重启Nginx

[root@localhost nginx]# ./sbin/nginx -s reload

6. 访问测试

   
   访问测试