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

最新推荐文章于 2022-08-20 19:57:42 发布

oneloser

最新推荐文章于 2022-08-20 19:57:42 发布

阅读量2.5k

点赞数

分类专栏： angular 文章标签： angular ng build --base-href 资源文件

本文链接：https://blog.csdn.net/oneloser/article/details/90741630

版权

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

摘要由CSDN通过智能技术生成

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—引用图片等静态资源

雷雨天的雷胖子

02-11

2972

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

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

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

05-23

918

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

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

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

u011342224的博客

08-13

1675

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

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

灿灿大王搭建的黄金屋

06-27

5140

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

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

HH猿的博客

07-21

6665

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

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

期待一个富婆

12-14

959

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...

javaweb前端规范（js解耦和）

03-19

在JavaWeb开发中，前端部分是用户交互的直接界面，其设计和实现的质量直接影响到项目的可维护性和用户体验。为了提高代码质量，降低维护成本，一套良好的前端规范是必不可少的。以下是一些关于JavaScript解耦合和...

让你从入门到工作——Java基础＞JavaWeb前端＞数据库＞动态网页＞微服务框架＞SSM＞高级框架＞分布式＞进阶＞面试

编程领域的博客

09-03

356

网上看到一首诗：“代码尽头谁为峰，一见秃头道成空。编程修真路破折，一步一劫渡飞升。”感觉还挺有意境的 Java编程 Java基础 Java基础是java初学者的起点，是帮助你从小白入门到精通必学基础课程！为初学者而著！ java300集>>>适合准备入行开发的零基础员学习Java，基于最新JDK13、IDEA平台讲解的，视频中穿插多个实战项目。每一个知识点都讲解的通俗易懂，由浅入深。不仅适用于零基础的初学者，有经验的程序员也可做巩固学习。 Java基础板块知识： .

前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）

Only-CYY的博客

07-05

3830

【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）

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

08-30

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

HTML与CSS基础知识及在JavaWeb中的应用

# 1. HTML基础知识 HTML（HyperText Markup Language）是一种用来描述网页结构的标记语言，它通过使用... ... ...它由一系列的标签组成，这些标签可以将文本、图片、链接等内容包裹起来，并告诉浏览器如何展示这些内容。...

angular6 加载静态资源

黄彪博客

09-26

4381

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

angular项目中配置文件实践

极简

12-05

1417

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

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

ho_mx的博客

04-10

856

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

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

feishusang的博客

03-27

3013

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

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

weixin_30553065的博客

03-19

707

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

记录Nginx部署Angular项目的坑

weixin_48859602的博客

08-20

1758

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

angular 图片路径 静态资源加载问题