个人网站: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或者域名即可。

Logo

前往低代码交流专区

更多推荐