Jeecg-Boot部署前端css、js 404问题解决方案

最新推荐文章于 2025-01-07 11:27:45 发布

小道士写程序

最新推荐文章于 2025-01-07 11:27:45 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： # SpringBoot 文章标签：前端 javascript css

原文链接：https://blog.csdn.net/yourstorm/article/details/123133480

SpringBoot 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了解决Jeecg-Boot前端部署过程中遇到的问题，包括图片资源无法正常显示及刷新网站出现404错误等。通过使用npm build打包项目，并调整vue.config.js和router/index.js文件设置，最后借助nginx正确配置实现稳定部署。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近用部署Jeecg-Boot项目，我想着是把前端文件放在tomcat中部署，然后发现跑项目的时候各种css，js找不到404，接下来是换了一种部署方式，用nginx部署前段资源。

本文转载大佬博客。Jeecg-Boot前端部署_你滴风的博客-CSDN博客_jeecgboot前端部署Jeecg-Boot前端服务器部署详细流程针对问题：1.图片资源不能正常显示2.网站刷新网站报404错误3.部署的操作步骤1.打包项目npm run buildnote:1.vue.config.js文件中这段注释//打包app时放开改配置 //publicPath:'/'是误导，不用修改2.router/index.js文件的Router模式mode:'history'正常部署不用动，简易部署方案修改成mode:'hash'3.运行打包后的命令，会在项目内生成对应的dist文件https://blog.csdn.net/yourstorm/article/details/123133480

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;
    }
}