一. Vue相关配置

1. 修改Vue配置文件：（vue.config.js）,没有该文件则在项目根目录下新建

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({transpileDependencies: true,assetsDir: 'assets', // 静态资源保存目录publicPath:'/',devServer:{port:9008,  //配置端口proxy:{'^/api':{target: 'http://xxx.xxx.xxx/',  //目标地址ws: true,changeOrigin: true, // 是否跨域pathRewrite:{  // 重定向'^/api':''},}}}
})

history模式: createWebHistory
hash模式：createWebHashHistory
注意：如果Vue的路由模式为 history模式: createWebHistory 则vue.config.js文件里面的 publicPath则是修改为：/，不然每次刷新页面或者变更路由就会报错 404。

const router = createRouter( {// 路由模式：history模式:  createWebHistory   hash模式：createWebHashHistoryhistory: createWebHistory(),routes
})

2.封装axios请求（第一种）

import axios from 'axios';
import store from '@/store';let baseUrl = "http://192.168.0.25:80/";
// let baseUrl = "/api";// 创建axios实例
const httpService = axios.create({baseURL:baseUrl,// 请求超时时间timeout: 3000
})// 添加请求和响应拦截器// 添加请求拦截器
httpService.interceptors.request.use(function (config){// config.headers.token = window.sessionStorage.getItem('token');console.log("store = " + store.getters.GET_TOKEN)config.headers.token = store.getters.GET_TOKENreturn config;
}, function (error){return Promise.reject(error);
});// 添加响应拦截器
httpService.interceptors.response.use(function (response){return response;
}, function (error){return Promise.reject(error);
});/* 网络请求部分 *//*** get 请求* url: 请求地址* params：参数*/export function get(url, params = {}){return new Promise((resolve, reject) => {httpService({url: url,method: 'get',params: params}).then(response => {resolve(response)}).catch(error => {reject(error)});});
}/*** post 请求方式* @param url： 请求地址* @param params   参数*/
export function post(url,params = {}){return new Promise((resolve, reject) => {httpService({url: url,method: 'post',data: params}).then(response => {resolve(response)}).catch(error => {reject(error)});});
}/*** 文件上传* url: 请求地址* params: 参数*/export function fileUpload(url,params = {}){return new Promise((resolve, reject) => {httpService({url: url,method: 'post',data: params,headers: {'Content-type': 'multipart/form-data'}}).then(response => {resolve(response)}).catch(error => {reject(error)});});
}export function getServerUrl(){return baseUrl;
}export default {get,post,fileUpload,getServerUrl
}

封装aoixs请求（第二种搭配Vue.config.js里面的代理使用）

import axios from 'axios'
import router from "../router";const request = axios.create( baseURL: '/api',// 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！timeout: 50000
})// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';// config.headers['token'] = user.token;  // 设置请求头//取出 sessionStorage里面缓存的用户信息// let userJson = sessionStorage.getItem("user")// if(!userJson) {//     router.push("/login")// }return config
}, error => {return Promise.reject(error)
});// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response => {let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服务端返回的字符串数据if (typeof res === 'string') {console.log("服务端返回类型" + typeof res)res = res ? JSON.parse(res) : res}console.log(res)return res;},error => {console.log('err' + error) // for debugreturn Promise.reject(error)}
)export default request

3.最后控制台输入命令“ npm run build ” 打包Vue项目，打包完成后项目根目录下会多出一个dist的文件夹。在服务器部署需要用到的。

npm run build

二. SpringBoot配置

1.修改项目端口号等信息

server:port: 9006    //修改为自己的端口号

2.把springboot项目打包成jar包（有两种方式）

2.1 第一种使用命令行：

mvn clean 清理项目

mvn compile 编译项目

mvn package 打包项目

mvn cleanmvn compilemvn package

2.2 第二种使用maven工具打包

2.3 打包后的jar一般默认是保存在项目根目录下 target 下面已 .jar结尾的文件

三. 服务器配置安全组出入规则（我的是阿里云）

阿里云服务器安全组配置开放端口

数据库：3306
springboot：9006
至于要开放哪些端口根据项目实际需求来。

四. 服务器安装宝塔面板（网上搜索教程）

五. 宝塔部署springboot项目

5.1 宝塔应用商店安装 “ Java项目一键部署 ” ，如不需要这个方式则可以上传Springboot项目的jar包到服务器的一个目录下面，在终端使用命令行启动项目（方式百度）。

5.2 安装好插件后，点击Java项目一键部署安装tomcat

5.3 添加Springboot项目，填写完后点击确定。使用域名或者IP+端口号访问就能访问到接口数据了。（有域名的话 直接映射域名地址就好了）

六. 宝塔部署Vue项目

6.1 在宝塔面板点击网站——>添加网站，点击确定

6.2 选择网站根目录，上传打包好的VUE项目，点击上传——上传目录，选中整个的dist

6.3 回到网站 点击对应项目上面的设置按钮，修改网站目录为dist文件夹

6.4 修改配置文件，增加如下配置

 	location / {try_files $uri $uri/ /index.html;  // 防止页面刷新路由报错}location /api/ {proxy_pass http://xxx.xxx.xxx/ ;  // 你后端接口地址}

七. 至此项目就部署好了，因为Vue3默认路由改变了，百度折腾了好一会。