Javaweb+Angular项目避免打包后找不到静态资源文件的措施

最新推荐文章于 2023-05-23 14:35:26 发布

原创

最新推荐文章于 2023-05-23 14:35:26 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #ng build #--base-href #资源文件

本文介绍了如何解决Javaweb+Angular项目打包后找不到静态资源的问题。关键步骤包括：确保前端Angular项目名与后端Java项目名一致；在`package.json`的`build`命令中使用`--base-href`指定资源路径；在`angular.json`的`build`部分的`asset`配置中调整资源路径；最后，正确调用静态资源文件的方式，例如图片引用。

1、前端创建的angular项目的名称应该和后端创建的java项目的名称保持一致；

2、package.json中的build需要通过–base-href来指定静态资源的路径，具体如下：

"build": "ng build --base-href ./",	//开发环境
"build:prod": "ng build --prod --base-href /xiangmumingcheng/",	//生产环境

3、如果需要修改静态资源文件的路径需要修改angular.json中build项的asset项，具体如下：

"assets": [

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

oneloser

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

详解如何构建Angular项目目录结构

08-30

本篇文章主要介绍了详解如何构建Angular项目目录结构，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

angular 打包后 index.html 显示Failed to load resource: net::ERR_FILE_NOT_FOUND

u011342224的博客

08-13

1764

Q：run build 之后找不到 .js 资源文件 A：打包时在ng build后加上–base-href ./

参与评论您还未登录，请先登录后发表或查看评论

Angular：解决项目打包发布后，前端静态图片在测试环境无法显示的问题

灿灿大王搭建的黄金屋

06-27

5331

今天前端页面的一些静态图片显示出现了一些问题，之前我让图片在测试环境显示的方法都是直接在Xshell上将本地图片直接上传到服务器，参考我之前的blog：https://blog.youkuaiyun.com/qq_36451496/article/details/91798366 今天后端小哥说，实际上前端的一些静态图是可以直接打包发布的，不用预先存到服务器上，所以就把服务器中存图片的assets文件夹备份...

angular项目中配置文件实践

极简

12-05

1517

前言：这里的配置一般指项目构建后可能需要运维人员进行手动修改的内容，比如：url地址等（没有使用代理服务器）。因此为便于运维人员修改，会创建单独的配置文件，且构建后也能方便其修改。一、配置内容放在json文件中 json文件放在assets目录下在使用处发送get请求获取json数据,请求可能需要同步二、js配置文件，把js配置文件当作第三方库使用创建配置文件src/app/ur...

记录Angular打包dist文件没有index.html的问题

julying的博客

12-09

1054

记录Angular打包dist文件没有index.html的问题最近新学angular 踩了很多坑记录一下 angular打包方式： ng build --prod --no-extract-license ng build --prod --aot --no-extract-license ng build --prod --build-optimizer ng build --prod --aot --no-extract-license --build-optimizer 我试了这几种都没有i

Angular 设置打包后资源访问路径

记录工作开发中遇到的技术难点，方便自己查看，也希望可以帮助到他人...

05-23

1260

Angular设置打包后资源访问路径

基于JavaWeb的前后端分离项目ApeVoloAdmin

本项目中的文件夹名如“ape-volo-admin-master”暗示了这可能是一个开源项目的克隆版本，而“xianhc_ape-volo-admin”可能是用户基于原项目进行个性化修改后的分支或本地命名。这种命名方式常见于开发者在GitHub或...

JavaWeb开源Blog系统搭建教程与文件下载

- 将编译后的类文件和资源文件打包成WAR（Web Application Archive）文件。 - 将WAR文件部署到Web服务器。 - 配置数据库连接和其他系统参数。 - 启动Web服务器，访问应用。通过以上分析，我们可以看到，搭建一...

基于JavaWeb的前后端分离商城系统IceMall

1742208169.zip”是一个典型的前后端分离架构的JavaWeb项目压缩包，其命名方式表明该资源可能由开发者“ZhuoZhuoCrayon”创建，并以“IceMall”作为项目名称，时间戳“1742208169”对应的是Unix时间格式，换算后约为...

基于SSM框架的前后端分离后端开发项目

这种架构的优势在于职责清晰、便于并行开发、提升性能（静态资源可CDN加速）、更易于实现单页应用（SPA）和移动端适配。综上所述，该文件所代表的知识体系涵盖了当前主流Java后端开发的关键技术链条：以SSM为基石...

JAVA Web静态资源问题的三种解决办法

HH猿的博客

07-21

6808

今天碰到一个问题，SSM项目WEB-INF目录下的静态资源例如.css .js .font等文件无法访问，原因是在web.xml里面配置的springmvc的DispatcherServlet的mapping为/，则Spring MVC将捕获Web容器所有的请求，因此不能对静态资源进行访问 <servlet> <servlet-name>springmvc...

Angular学习笔记-配置静态路由

期待一个富婆

12-14

1034

1.声明一个路由组件(app-routing.module.ts) 1.1 在新生成的项目声明 ng g &amp;lt;project name&amp;gt; --routing 1.2 内部项目声明 ng generate module app-routing --flat --module=app 2.app-routing.module.ts文件同时他会在app.module里注入这个文件 3...

angular6 加载静态资源

黄彪博客

09-26

4609

文章目录文章参考操作步骤assets文件夹说明文章参考 https://angular.cn/guide/file-structure 操作步骤 静态资源添加在 src/assets目录下面代码中引入assets中的文件，要是用相对路径  <img src=' ./assets/images/test_img.jpg' /> as...

Angular—引用图片等静态资源

雷雨天的雷胖子

02-11

3248

目录一、概述二、详解一、概述 静态资源存放在assets文件夹。二、详解普通引入方式直接在html模板中通过相对路径引用。 <h2>引入图片</h2> <img src="assets/images/nine.png" alt=""> 通过TS中定义的图片地址加载资源 export class NewsComp...

Angular打包文件目录及访问地址

Spenan

12-07

1705

方法一、改变文件目录不改变访问地址： ng build --prod --base-href /web 说明：web为你在运行环境环境（如：tomcat）中的文件夹名称即可方法二、改变访问地址录同时改变文件目录 1、修改index.html文件中的base <base href="/web/"> 2、修改配置文件karma.conf.js，中的basePath bas...

关于angular-cli build后文件路径错误

ho_mx的博客

04-10

933

在angular-cli执行ng build --prod --aot后部署上tomcat后发现资源获取路径错误， google一遍，提示在packge.json的scripts添加"build":"ng build --pord --aot --base-href ./" 其中./是自定义路径，一般为我设置为项目路径嗯，按照这段指令，可以直接ng build的时候加上--

angular打包后路由和文件路径不对

weixin_30553065的博客

03-19

761

base href换成如下script标签  <script> document.write('<base href="' + document.location + '" />'); </script> 在app.module.ts下添加 { prov...

Angular ng-build后放入Tomcat,刷新404，手动输入404

feishusang的博客

03-27

3149

最近因为一些要求，需要将angular打包放入tomcat和后台丢入同一个地址下，发布后，访问网站，过程都正常，单当刷新网页的时候，就出现404页面同样，如果这个路由是你手动输入到浏览器的，也会跳转到404页面。产生这样的原因，经过查资料也能发现，因为刷新页面、手动输入跳转寻找的都是 java web中的地址，自然是找不到的。通过查询，看到的解决办法大致是两种：1、在NgModule中添加： ...

记录Nginx部署Angular项目的坑

weixin_48859602的博客

08-20

1981

我的服务器就只用80端口来完成前端和后端部署（以及多个项目部署），失去了可以区分项目或者前后端入口的端口号，我只能用uri来区分该指向哪个端口或文件，所以使用Nginx是在合适不过了。但是这路上太多坑，以至于我捣鼓了两天。下文出现该色号，代表问题所在目录前言一、后端代理1、如何将请求uri切割，将“标志”去除后转发到我的后端项目二、前端代理1、白屏，能访问到index.html但是无法获取到css/js资源2、正常点击很正常，一刷新就4043、我觉得的正确的部署前端。