三更博客宝塔部署前后端分离版本（傻瓜式安装）

一.试用阿里云配置安全组，安装宝塔面板。

安全组可单独端口配置，也可以直接全配了。 注意宝塔面板也要配！ 24310是我的宝塔面板端口，根据自己的修改即可

二.新建数据库并检查结构和数据（新加的数据可能会导致项目运行报错）

三.修改Vue项目运行端口

规定： blog：8093 admin：8094 找文件建议定位目录搜索 或者 用idea使用Ctrl+shift+r全局搜索。 都改成自己对应的服务器公网ip。 注意：http有的地方别改成https

1.admin

改：

改： 解决路由缺失（跳转失败） 修改index.js 这里我是复制的全部，你也可以对应修改constantRoutes。

import Vue from 'vue'
import Router from 'vue-router'
​
Vue.use(Router)
​
/* Layout */
import Layout from '@/layout'
​
/**
 * Note: sub-menu only appear when route children.length >= 1
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)
 * alwaysShow: true               if set true, will always show the root menu
 *                                if not set alwaysShow, when item has more than one children route,
 *                                it will becomes nested mode, otherwise not show the root menu
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  }
 */
​
/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }]
  },
  {
    path: '/write',
    component: Layout,
    children: [{
      path: '/',
      name: 'Write',
      component: () => import('@/views/content/article/write/index'),
      hidden: true
    }]
  },
  {
    path: '/system/user',
    component: Layout,
    children: [{
      path: '/',
      name: 'User',
      component: () => import('@/views/system/user'),
      hidden: true
    }]
  },
  {
    path: '/system/role',
    component: Layout,
    children: [{
      path: '/',
      name: 'role',
      component: () => import('@/views/system/role'),
      hidden: true
    }]
  },
  {
    path: '/system/menu',
    component: Layout,
    children: [{
      path: '/',
      name: 'menu',
      component: () => import('@/views/system/menu'),
      hidden: true
    }]
  },
  {
    path: '/system/role',
    component: Layout,
    children: [{
      path: '/',
      name: 'role',
      component: () => import('@/views/system/role'),
      hidden: true
    }]
  },
  {
    path: '/content/article',
    component: Layout,
    children: [{
      path: '/',
      name: 'article',
      component: () => import('@/views/content/article/index'),
      hidden: true
    }]
  },
  {
    path: '/content/category',
    component: Layout,
    children: [{
      path: '/',
      name: 'category',
      component: () => import('@/views/content/category/index'),
      hidden: true
    }]
  },
  {
    path: '/content/link',
    component: Layout,
    children: [{
      path: '/',
      name: 'link',
      component: () => import('@/views/content/link/index'),
      hidden: true
    }]
  },
  {
    path: '/content/tag',
    component: Layout,
    children: [{
      path: '/',
      name: 'tag',
      component: () => import('@/views/content/tag/index'),
      hidden: true
    }]
  }
]
const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})
​
const router = createRouter()
​
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}
​
export default router
​

防止打包报错： 如图注释：

2.blog

同admin修改：

四.给Vue项目blog打包

npm run build

五.给vue项目admin打包

npm run build --report

2.4后端项目打包

1. 后端项目使用maven打包

打包后在target目录下生成对应模块的jar包

打包出现的问题：我在打包完成后查看jar包，发现只有16kb，然后试在本地运行jar包测试，果然有错误，报错信息是：xxxxx-0.0.1-SNAPSHOT.jar中没有主清单属性，原因是不能找到程序的主类，需要修改父pom文件和子模块sangeng-blog的pom文件和子模块sangeng-admin的pom文件，修改如下：

2.4.1解决打包问题

    这是要使用的SpringBoot版本要在2.6以上，我的为2.6.11

1. 父pom

<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.10.1</version>
        </plugin>
        <!-- 此插件必须放在父 POM 中  -->
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-assembly-plugin</artifactId>
            <version>3.3.0</version>
            <executions>
                <!--
                执行本插件的方法为，在主目录下执行如下命令：
                mvn package assembly:single
​
                对于 IntelliJ IDEA，生成的 JAR 包位于每个模块下的文件夹 target
                -->
                <execution>
                    <id>make-assembly</id>
                    <phase>package</phase>
                    <goals>
                        <!-- 此处 IntelliJ IDEA 可能会报红，这是正常现象  -->
                        <goal>single</goal>
                    </goals>
                </execution>
            </executions>
            <configuration>
                <archive>
                    <manifest>
                        <!-- 配置程序运行入口所在的类 -->
                        <mainClass>com.xha.SanGengBlogApplication</mainClass>
                    </manifest>
                    <manifest>
                        <!-- 配置程序运行入口所在的类 -->
                        <mainClass>com.xha.SanGengAdminApplication</mainClass>
                    </manifest>
                </archive>
                <!-- 设置 JAR 包输出目录 -->
                <outputDirectory>${project.build.directory}/#maven-assembly-plugin</outputDirectory>
                <!-- 设置打包后的 JAR 包的目录结构为默认 -->
                <descriptorRefs>
                    <descriptorRef>jar-with-dependencies</descriptorRef>
                </descriptorRefs>
            </configuration>
        </plugin>
    </plugins>
</build>

1. 子模块sangeng-blog和子模块sangeng-admin的pom文件

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <executions>
                <execution>
                    <goals>
                        <goal>repackage</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
    </plugins>
    <finalName>${project.artifactId}</finalName>
</build>
​

2.4.2项目打包，本地运行jar包测试

在这之前首先修改配置文件中的mysql和redis服务ip地址

在父pom下首先clean清除先前的jar包，再install打包.（单模块项目首先clean清除先前的jar包，再package打包）

sangeng-blog模块

sangeng-admin模块

进入target目录下，在文件搜索框输入cmd进入Dos窗口，使用命令运行jar包

java -jar jar包
1

若未报错则jar包没有问题

六.安装宝塔

需要 域名(域名备案)、 服务器

安装宝塔 我的是Centos版本的

进入宝塔页面

七.项目部署

代表后台运行

nohup java -jar sangeng-admin.jar &

sangeng-blog.jar也同上述一样

访问域名

 

访问你的域名加上后端路径肯是否有数据成功

有数据部署成功

八.前端部署

访问你的域名

部署成功。后台也同上述一样。

借鉴原创猫三棂：SpringBoot+Vue前后端分离三更草堂部署个人博客项目-阿里云部署（简）_vue+springboot前后端分离部署_猫三棂的博客-CSDN博客

文章中前面部分我是直接用原创的，如有侵权，实属冒犯，不是故意的（我就是有点懒）希望原创介意的话及时通知我进行删除

最后感谢三更老师的视频