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同步更新
  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
根据提供的引用内容,我无法找到关于"jeecg-boot 前端for循环"的具体实现。引用和引用提到了关于jeecg-boot的数据库设计和视图的使用,但没有提及前端for循环的实现方法。jeecg-boot是一个基于Spring Boot和MyBatis的开源快速开发平台,它提供了一套代码生成器和一些默认的前端控件,但具体的前端for循环实现可能需要根据具体的业务需求进行自定义开发。 如果你需要在jeecg-boot前端页面中使用for循环,你可以通过以下步骤实现: 1. 在前端页面中使用JavaScript的for循环语句来遍历数据。 2. 根据具体的业务需求,使用for循环来生成动态的HTML元素或执行其他操作。 以下是一个示例,展示了在jeecg-boot前端页面中使用for循环来遍历数据并生成动态的HTML元素的方法: ```javascript <script> // 假设data是一个包含多个对象的数组 var data = [{name: 'John', age: 25}, {name: 'Jane', age: 30}, {name: 'Bob', age: 35}]; // 使用for循环遍历数据 for (var i = 0; i < data.length; i++) { var item = data[i]; // 根据数据生成动态的HTML元素 var div = document.createElement('div'); div.innerHTML = 'Name: ' + item.name + ', Age: ' + item.age; // 将生成的元素添加到页面中的某个容器中 document.getElementById('container').appendChild(div); } </script> ``` 请注意,以上示例仅为演示目的,具体的实现方法可能因具体业务需求而异。你可以根据自己的需求进行适当的修改和调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值