Jeecg-Boot前端部署
司寇经亘
Jeecg-Boot前端服务器部署详细流程
针对问题：
1.图片资源不能正常显示
2.网站刷新网站报404错误
3.部署的操作步骤
准备工作
- 部署生产环境，修改.env.production文件中url
NODE_ENV=production
VUE_APP_API_BASE_URL=http://生产环境ip:8080/jeecg-boot
VUE_APP_CAS_BASE_URL=http://生产环境ip:8888/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
- 若要是在本地测试，访问后端测试环境，修改.env.development文件中的url
NODE_ENV=development
VUE_APP_API_BASE_URL=http://测试环境ip:8080/jeecg-boot
VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
1.打包项目
npm run build
note:
1.vue.config.js文件中这段注释//打包app时放开改配置 //publicPath:'/'是误导，不用修改
2.router/index.js文件的Router模式mode:'history'正常部署不用动，简易部署方案修改成mode:'hash'
3.运行打包后的命令，会在项目内生成对应的dist文件，此文件就是要部署到服务器的文件
2.上传
根据个人情况选择：
1.上传dist文件到nginx文件夹下的html文件中
2.服务器上新建一个文件来存放项目文件
3.nginx
server{
listen 81;#监听的端口，本地访问ip:81
server_name localhost;#有域名配置域名
#解决Router(mode: 'history')模式下，刷新路由地址不能找到页面的问题
location / {
root /usr/gyimom/;#项目文件存放位置,可自定义或者nginx/html文件下
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^(.*)$ /index.html?s=$1 last;
break;
}
}
#后台服务配置，配置了这个location便可以通过http://域名/jeecg-boot/xxxx 访问
location ^~ /jeecg-boot {
proxy_pass http://127.0.0.1:8080/jeecg-boot/;
proxy_set_header Host 127.0.0.1;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
nginx命令
#使用前提进入到nginx目录下的sbin目录
#或者nginx文件绝对路径形式
./nginx -v #查看nginx版本
./nginx #启动nginx
./nginx -s reload #重启（重载nginx配置）
./nginx -s stop #关闭nginx
./nginx -t #验证nginx配置文件
nginx依赖
1.pcre
2.zlib
3.openssl
4.gcc
nginx端口号可自定义设置，但需注意端口的放行
4.linux放行端口
以上述nginx监听的81端口为例
1.查看防火墙状态
若是开启状态越过第2步，关闭顺序操作
firewall-cmd --state
2.开启防火墙
systemctl start firewalld.service
3.查看指定端口放行状态（yes/or）
firewall-cmd --query-port=81/tcp
4.放行指定端口
firewall-cmd --zone=public --add-port=81/tcp --permanent
5.重启防火墙
systemctl restart firewalld.service
6.重新载入配置
firewall-cmd --reload
参考链接
本人博客园地址，和CSDN同步更新
类似资料：