angular ng build打包后路径错误导致页面404

最新推荐文章于 2023-08-22 12:52:23 发布
原创 最新推荐文章于 2023-08-22 12:52:23 发布 · 2.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#angular

本文介绍了解决在项目打包过程中遇到的资源加载失败问题，通过在 ng build 命令后添加 --base-href ./ 参数来确保所有资源都能被正确加载。
错误：
Failed to load resource: net::ERR_FILE_NOT_FOUND

这里写图片描述

解决：

打包时在ng build后加上--base-href ./

这里写图片描述

前端领域Webpack与Angular项目的整合
小白菜的博客
04-27 998
在当今的前端开发领域，随着项目的复杂度不断增加，对构建工具的要求也越来越高。Webpack作为一款强大的模块打包工具，能够帮助开发者处理各种资源的打包和优化。而Angular是一个流行的前端框架，具有强大的组件化开发能力。将Webpack与Angular项目进行整合，可以充分发挥两者的优势，提高开发效率和项目性能。本文的目的就是详细介绍如何将Webpack与Angular项目进行有效的整合，涵盖了从基础概念到实际项目应用的各个方面。
【Angular】——路由之刷新报404
相由心生-心随相改~
05-28 5540
项目进入测试期，发现了一个开发过程中没有发现的问题：发布后访问网站，使用过程一切正常：     但只要刷新，就会：       开始查了一些资料：大都是关于这样的说法：     那如果必须要这样解决的话，不就违背了前后端分离的原则？又开始让后端控制前端，这样前端自己封装路由又有何深刻的意义。因为有着这样的信念：肯定有前端的解决方案，所以继续查资料，最终发现了我想要的，
angular打包常见错误
weixin_57895172的博客
08-22 917
错误：初始捆绑包超出了最大预算。预算1.00 MB未达到307.48 kB，共计1.30 MB。然后再打包，就可以了。
angular4.0项目build发布后，刷新页面报错404
weixin_34352005的博客
02-24 303
2019独角兽企业重金招聘Python工程师标准>>> ...
「ng」生产版本部署，404 Not Found问题
weixin_34377919的博客
01-07 462
【问题】 使用nginx服务，使用 ng build --prod 后生成dist目录，在nginx.conf配置中指向dist后发现除了首页正常，其他都是404 Not Found 【解决】 其实官网已有解答，增加映射即可，参考我的nginx.conf的配置文件 server { listen 80; server_name 127.0.0...
Angular ng-build后放入Tomcat,刷新404，手动输入404
feishusang的博客
03-27 3145
最近因为一些要求，需要将angular打包放入tomcat和后台丢入同一个地址下，发布后，访问网站，过程都正常，单当刷新网页的时候，就出现404页面同样，如果这个路由是你手动输入到浏览器的，也会跳转到404页面。产生这样的原因，经过查资料也能发现，因为刷新页面、手动输入跳转寻找的都是 java web中的地址，自然是找不到的。通过查询，看到的解决办法大致是两种：1、在NgModule中添加：   ...
使用 ng build 构建后资源地址引用错误的问题
weixin_34034261的博客
04-30 300
最近使用 Angular 做项目的时候，通过 ng build 打包后的资源地址都带有 localhost:4200，百思不得其解，以为是打包的问题。 最后在 index.html 的文件中发现有一个 <base> 标签，原来这个标签会在页面的所有链接上添加默认地址。以下是详细说明： <base> 标签为页面上的所有链接规定默认地址或默认目标。 通常情况下，浏览器...
Angular10 配置 webpack 打包
青颜的天空的博客
01-21 2651
对于 Angular 项目，推荐使用 angular-cli 创建打包项目 Angular 会默认帮我们配置。 但是有特殊的需求时就显然不是很灵活，比如想分割一些较大的打包文件、分析每个打包文件组成，自定义webpack一些参数的时候就发现无从下手。 对许多项目的常见依赖项是日期库moment.js 。 这包括使用语言环境的功能，但是，它大大增加了整体捆绑软件的大小。这些都是需要我们优化的地方。 一、ngx-build-plus 建立额外配置 这里推荐一个工具库ngx-build-plus，不需要改很多东西
Angular打包后静态资源Failed to load resource: the server responded with a status of 404
最新发布
03-26
当遇到 Angular 应用打包后的静态资源返回 404 错误时，通常是因为路径配置不正确或部署环境未正确处理静态资源请求。以下是可能的原因分析以及解决方案： #### 1. **`baseHref` 配置** 在 `angular.json` 文件中，...
Angular2 环境配置详细介绍
11-26
在使用CLI过程中，可能会遇到“Build failed”的错误。这可能是因为CLI未完全卸载。解决方法是手动删除全局目录中与Angular CLI相关的文件。 Angular CLI提供了一系列方便的命令，用于项目的日常开发： 1. `ng new...
基于Angular CLI的newbuild_Rabwin项目开发与构建
执行该命令后，Angular CLI 使用 Webpack 打包工具对整个项目进行静态资源编译与优化，输出结果存储于 `dist/` 目录中。此过程包括 TypeScript 编译为 JavaScript、模板内联、样式预处理（如 SCSS 转 CSS）、Tree-...
npm run build 打包项目，图片等资源使用相对路径会出现路径错误的问题
weixin_30628077的博客
08-12 933
在build下的utils.js中，3使用 ‘vue-style-loader’ 依赖的地方添加 publicPath: '../../' ， 如图： 转载于:https://www.cnblogs.com/week-1/p/9465386.html
Angular11(Cli) 在打包 ng build 后的常见问题处理方案
沐枫
04-21 1万+
前言： 我自认为，到目前为止 Angular 框架始终保持着前端框架领域中的龙头老大位置，虽然在前端框架领域中有很出色的React.js和易上手的Vue.js框架。 从使用以上3个框架的情况来看，我个人更喜欢Angular，尤其是在支持使用TyptScript以后，当然React和Vue都有，而且各个框架都有自己的特色，所以在选择时要根据项目大小、需求等方面来选择合适的前端框架，这里就不多说了...
ng build打包项目指定网址前缀
IT从业者
10-15 664
ng build打包项目指定网址前缀
Angular 项目打包之后，部署到服务器，刷新访问404解决方法
S筱潇S四维Smile
07-09 5378
将前端代码打包部署到Java服务器中，当跳转到相应路由界面，刷新地址，服务找不到地址页面，所以会报   404 - Page Not Found。 解决方法：只需要将路由转换成哈希值: userHash: true，将路由转化成“#”号的形式 以下两种方式修改路由，使用hash: 1、app.module.ts imports: [ RouterModule.forRoot(ro...
《Angular之ng build部署后base文件路径问题》
杨晓风 迷迭香的记忆
09-30 7299
前言：                                                             千锤万凿出深山，烈火焚烧若等闲。 正文：    一。问题描述         使用angular-cli搭建的项目，执行ng build后，浏览器打开空白，界面显示一直loading.    二。问题定位         文件路径不对，使用ng new...
angular6使用PathLocationStrategy路由策略打包发布的问题
黄彪博客
07-15 8148
问题描述 开发的一个angular项目，采用的是PathLocationStrategy路由策略，打包完成之后，直接运行index.html文件，发现引入的main.js路径不对，报404错误，项目中也引入了一些图片，也是路径引入不对，报404错误。 经过调试发现，图片和main.js引入的全部是/根目录，受到&amp;lt;base href=&quot;/&quot; /&amp;gt;这个影响，因此直接在index.html中...
【angular2】（3）ng build部署后base文件路径问题
热门推荐
Pluto
02-18 1万+
问题：使用angular-cli搭建的项目，执行ng build后，浏览器打开空白，发现文件的路径不对解决方案： 在package.json文件的scripts中添加命令："build":"ng build --base-href ./" –base-href后面替换成打包后的base路径 执行：npm run build
解决angular 4.0项目打包后404错误
weixin_34318326的博客
08-20 705
最近公司在使用一个开源项目，但是其无法全屏的问题收到公司同事的一致吐槽和内心拒绝。因此，尝试进行源码分析之后进行了魔改，然而在本地通过ng server调试正常的代码，使用ng build打包的程序上传到服务器后，居然出现了404的错误。 搜索Google和百度之后总结如下三点解决方案： 1. 修改app.module.ts文件---来源于百度。（本项目修改后无效） app.module.ts文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值