在前端时间花了大概三个星期时间纯手写了一个个人博客系统,是基于SpringBoot+Vue+MySQL的,下面是主页界面和后台管理界面(感兴趣的新手小伙伴可以加我哦,后期还会找一些项目,可以一起做)

本文主要讲一下如何部署对应的项目到服务器,下面开干吧!

后端打包部署:

打包:相对来说比较简单,直接点击package就可以实现打包的一些列操作

上图表示成功了打包了

之后在项目路径下会生成对应的jar包

部署到Linux服务器:

我用的是宝塔面板进行部署(非常的方便,不知道宝塔的小伙伴可以去安装玩一玩)

将对应的jar包放到一个文件夹目录下

点击网站,之后java项目,添加java项目

填写下面的信息(首先要保证linux环境下自己有对应项目的jdk,注意一定要保持一致,我当时用的是jdk11开发的项目,之后linux上jdk用的1.8,肯定是跑不起来的,所有版本一定要统一一下,避免出现错误,端口的话就填你项目配置文件里面的项目运行端口)

之后就放行一下你要用的端口(后面不在赘述,总是你所有要用到的端口一定要在这里进行开放,当然,我用的是阿里云的服务器,所有也要在里面开发对应的安全组)

之后就跑起来就行了

目前为止后端就部署成功了,其实过程中还有点细节上的东西,比如你要安装好对应的环境:比如在软件商店安装

前端项目部署:

我前端用的是webpack创建的项目,目录结构如下:

在打包部署之前要进行一些配置:
config/index.js文件的修改

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')
//这是我开发环境下的一个解决跨域的配置
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/': {
        target: 'http://ip:项目port',
        changeOrigin: true,
        pathRewrite: {
          '^/': ''         //路径重写
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 本项目运行的端口, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },
//重点配置这块
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    env: require('./prod.env'),  //这里改成生产环境
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),     //打包后dist文件夹生成的位置,默认不修改
    assetsSubDirectory: 'static',
    assetsPublicPath: './', //这里非常重要,不然你的图片啥的加载不出来,具体原因你可以自己去查一下

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

同时为了部署之后图片加载不了的问题,还要进行如下的修改