springboot 部署一般是采用jar 部署,也有采用war(集成了jsp,不推荐使用)
一、将vue 项目编译后打入jar 包部署方式
1、运行vue打包命令,前提是vue项目正常,无错误!
npm run build
2、运行命令后,在项目根目录会生成一个dist 文件夹,将dist 文件夹的所有文件,拷贝至springboot项目中的static(static默认放行)
访问前缀,如果打包后的文件直接放置于springboot的static文件夹下则不需要加前缀,如果在static下建立了二级目录,则这里需要改成目录名称,例如:static/test1 则这里需要变成/test1 在运行npm run build
无独有偶,如果需要部署多个前端项目,比如PC后台,H5端两个项目,则需要在static 下建二级文件夹。这就是baseUrl 的前缀的作用。当然根据系统架构的不同,因情况定。总之,需要注意系统的访问前缀
module.exports = {
baseUrl: '/',//这里是访问前缀,如果打包后的文件直接放置于springboot的static文件夹下则不需要加前缀,如果在static下建立了二级目录,则这里需要改成目录名称,例如:static/test1 则这里需要变成/test1 在运行npm run build
devServer: {
port:8080,
proxy: 'http://47.96.21.80:8999'
},
chainWebpack: config => {
config.merge({
externals: {
"CKEDITOR": "window.CKEDITOR"
}
});
},
pwa: {
iconPaths: {
favicon32 : 'favicon.ico',
favicon16 : 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon : 'favicon.ico',
msTileImage : 'favicon.ico'
}
}
}
3、将项目打包成jar,并部署到服务器上,springboot不需要安装tomcat容器,运行jar命令即可
nohup java -jar test-1.0.jar --spring.profiles.active=trial &
--spring.profiles.active=trial 这里可以指定配置文件。博主一般根据多个环境的不同,创建多个环境对应的配置文件,如下:
因此可以采用配置命令方式设定系统应用哪个配置文件。
application-dev.yml
application-server.yml
application-trial.yml
4、访问项目
IP:端口/前缀
优势:
1、部署方便,直接了当。
2、简单明了。
劣势
1、在只修改前端的情况下需要重新打包,比较繁琐。
二、前后端分离部署
1、运行vue打包命令,前提是vue项目正常,无错误!
npm run build
2、安装nginx 并添加如下配置
server {
listen 9999; # 监听端口
server_name localhost; # 域名可以有多个,用空格隔开
location / {
root D:\phpstudy_pro\WWW\energy; #站点根目录,即网页文件存放的根目录, 默认主页目录在nginx安装目录的html子目录。
index index.html index.htm; #目录内的默认打开文件,
}
#ssl配置省略
location /前缀{
rewrite ^.+前缀/?(.*)$ /$1 break;
proxy_pass http://IP:端口; #即需要代理的IP地址
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
#error_page 404 /404.html; #对错误页面404.html 做了定向配置
# redirect server error pages to the static page /50x.html
#将服务器错误页面重定向到静态页面/50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
3、将vue项目中的dist下所有的文件拷贝至nginx中的root 对应的系统目录下。
4、访问项目
IP:nginx配置的端口