在前端时间花了大概三个星期时间纯手写了一个个人博客系统,是基于SpringBoot+Vue+MySQL的,下面是主页界面和后台管理界面(感兴趣的新手小伙伴可以加我哦,后期还会找一些项目,可以一起做)
本文主要讲一下如何部署对应的项目到服务器,下面开干吧!
上图表示成功了打包了
之后在项目路径下会生成对应的jar包
我用的是宝塔面板进行部署(非常的方便,不知道宝塔的小伙伴可以去安装玩一玩)
将对应的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
}
}
同时为了部署之后图片加载不了的问题,还要进行如下的修改
都配置好了之后就可以打包操作了
终端输入:npm run build
之后会生成对应的dist文件夹
我将dist文件夹放在了一个大目录下
一般改动三个地方就好了
第一个位置填写你的域名,如果没有域名的话就直接用你服务器的公网ip
根目录位置找到你的dist文件夹
php版本改成纯静态
至此,前后端的部署工作就完成了,可以去浏览器访问你部署好的项目了
简单总结一下吧
我这个项目其实写的东西比较简单:
前端是基于Vue2+element-ui+Ajax(简单的二次封装了一下)+v-md-editor(说实话这种富文本编辑器还是挺好用的)
后端主要是SpringBoot+Mybatis-Plus+MySQL(代码量我这个相对较少)
以后做的话还会手写一下JWT认证,用redis做下缓存,增加多用户模块等等,目前限于时间和技术原因没有去实现,感兴趣的小伙伴可以加我,大家一起遨游在技术的海洋hhhhhh