vue + springboot 项目部署服务器(宝塔面板)

个人网站:https://www.miwang.fun/
借鉴:https://blog.csdn.net/Lzy410992/article/details/115695616(宝塔安装,项目打包,域名申请)

修改配置(ip、端口)

vue(指定ip开启跨域)

// vue.config.js
module.exports = {

// 配置跨域请求
    devServer: {
        port: 80, //前端端口--随意,通过Nginx反向代理后都一样
        //host: 'localhost', //主机地址
        open: true,
        proxy: {
        '/api': {
            target: 'http://ip:后端端口/',
            ws: true,
            changeOrigin: true,
            pathRewrite: {
            '^/api': '/'
            }
        }
        }
    },
}

axios配置(重点)请求的api接口配置

import axios from "axios";
// 全局路径 请求的路径
axios.defaults.baseURL = 'http://ip:后端端口'

打包(打包后生成dist文件)

npm run build

springboot(配置完成然后打成jar包)
这里的数据库名称,用户名,密码和宝塔创建的对应

server:
  port: 后端端口
spring:
  # 数据源
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://ip:3306/数据库名称?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT%2B8 #中国时区
    username: 数据库用户名
    password: 数据库密码
  servlet:

#

创建数据库并把sql文件上传

  1. 进入宝塔面板后,点击数据库
  2. 添加数据库
  3. 填写对应的字段点击提交
  4. 然后导入sql文件

在这里插入图片描述

上传vue的打包文件和springboot的打包文件

  1. 点击文件
  2. 上传
  3. 把打包的文件上传到自己指定的位置,都可以

在这里插入图片描述

先部署vue

一定要安装Nginx,安装完成会自动部署80端口

  1. 点击网站
  2. 添加站点
  3. 填写域名(没有域名先填写ip)
  4. 根目录选择上传的dist文件
  5. 点击确定,访问ip或者域名,前端可正常显示

在这里插入图片描述

部署springboot

  1. 点击应用商店
  2. Java项目一键部署(没有可以先安装)
  3. springboot
  4. 添加项目
  5. 填写信息

在这里插入图片描述
然后访问ip或者域名即可。

  • 8
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值