vue打包静态资源找不到、图品与icon找不到问题解决

最新推荐文章于 2024-05-23 14:26:31 发布
最新推荐文章于 2024-05-23 14:26:31 发布
阅读量990 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue vue打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Beamon__/article/details/93982266
本文详细介绍了如何通过修改Webpack配置解决资源路径问题，包括设置config/index.js中的assetsPublicPath为'./'解决js与css文件路径问题，以及在build/utils.js中使用ExtractTextPlugin插件并添加publicPath配置解决静态图片与icon的路径问题。

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

步骤1：设置config/index.js

在build配置中，将 assetsPublicPath 设置为 ./ ,如下图

以上解决的js与css文件找不到问题

 

步骤2：设置build/utils.js

ExtractTextPlugin插件添加publicPath配置，如下图

共需配置两处

以上解决的静态图片与icon找不到问题

vue+ts+electron从客户端跳转网页，public文件中的图片不显示如何解决以及动态环境配置中数据获取不到
Missxu1895的博客
05-25 265
首先要明确因为本地和打包后安装的不是同一路径，本地是不需要拼接资源路径的，只有打包安装的时候才是需要的，所以在页面上进行拼接的时候要注意这一点，不能因为要为了解决部署安装以后的问题而影响到本地调试运行。我们之前经常在环境配置中设置的信息（比如下面代码中设置的），但是在客户端的时候因为会涉及到选环境 所以环境配置中的某些数据就没用了，但是有的页面上还是会用到所以就要改到store中获取。所以为了解决这个问题首先第一步要找到安装路径拼接到此路径前面，第二步就是修改页面上的路径，在页面上引用。
Create React App antd-mobile 打包到子目录下出现无法显示、显示空白、Unexpected token 等问题
LiFangHui_的博客
07-11 858
首先我的是history模式，服务器是iis 假如我打包之后要放在agent目录下 现在目录情况了解了，再来看代码配置那边 首先是路由，我用的是React-Router4 然后package.json 最后是config-override.js （因为这个脚手架隐藏了webpack的配置文件，所以我使用了react-app-rewired，当然你也可以用eject显示web...
解决vue打包之后静态资源图片失效的问题
11-27
1、问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！ 2、解决方法之一 静态资源static存放位置放在src目录下   你可能会问为什么放在src目录下？放在跟src同级目录下不可以吗？好吧，一开始我也是放在src同级目录下，但是在某个css文件中引入背景图片的时候打包之后图片失效，我是这样引入的   实践证
vue项目使用webpack打包后部署到服务中无法读取静态资源
followly的博客
12-11 2347
在打包vue项目时，因为通过脚手架生成的项目，部署到服务中会出现读取静态资源404的情况
vue打包不显示图标
qq_59717525的博客
08-07 225
在bulid 目录下找到utils.js文件 找到如下代码 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' //添加这行代码 }) } else { return ['vue-style-loade..
vue,打包完以后出现的问题，element的icon图标找不到，文件，图片路径问题等
hsany330的专栏
07-26 1606
在vue打包完，发现很多问题，来整理下： 第一：使用element框架的icon时候，开发环境下是没有问题的，打包完以后出现小方块，页面不显示， 解决办法：找到utils.js文件，加publicPath: '../../' function generateLoaders (loader, loaderOptions) { const loaders = options.u...
hbuilder打包unpackage>res>icons>192x192未找到
qq_35919264的博客
01-11 1841
转载这里就是方法 以防万一，再写一遍 Hbuilder8.8.5 云打包具体发行日志如下： manifest.plus.plugins.maps.baidu;manifest.plus.plugins.push.igexin;manifest.plus.plugins.map.baidu; BuildConfigure Failed 31013 unpackage/res/icons/120x12...
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
10-16
默认情况下，`publicPath`设置为当前目录，这在本地开发时没有问题，但在部署到服务器上时，可能会导致静态资源（如图标）无法正确加载。为了解决这个问题，我们需要将`publicPath`改为相对路径，通常是向上两个层级...
解决Vue 项目打包后favicon无法正常显示的问题
10-18
综上所述，解决Vue项目打包后favicon无法显示的问题关键在于正确配置静态资源路径，并且注意浏览器缓存可能带来的影响。通过上述方法，我们可以确保用户在访问网站时能够看到正确且更新过的favicon图标。希望本文的...
vue打包静态资源图标
最新发布
05-27
### Vue 打包时处理静态资源图标的方法 在使用 Webpack 进行 Vue 项目打包的过程中，对于静态资源图标的处理通常涉及以下几个方面： #### 1. **Webpack 的 `file-loader` 和 `url-loader`** 为了正确加载图片或...
详解Vue+elementUI build打包部署后字体图标丢失问题
10-15
具体表现是在控制台中显示404错误，找不到`element-icons.woff`和`element-icons.ttf`等字体文件。 ### 解决方案 要解决打包后字体图标丢失的问题，关键在于正确配置Webpack，确保在打包过程中资源文件的路径被...
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
11-20
动态设置img的src属性无效，而直接写可以 解决办法： imgSrc写成require(‘path’)； 原因： 动态添加src被当做静态资源处理了，没有进行编译 npm run build 后出现 xxxxxxx net::ERR_FILE_NOT_FOUND 解决办法： 进入：build文件夹 > 打开 webpack.prod.conf.js 找到：output 对象 添加：publicPath：‘./’ 具体写法： publicPath: process.env.NODE_ENV === 'production' ? './' +config.build.asset
vue3+vite打包后静态资源不显示
Mjxiaomihu的博客
01-04 6722
vue3+vite打包后静态资源不显示
vue编译图片不显示，require()与require().default区别
weixin_45288512的博客
08-31 1389
vue打包图片，图片地址不存在或者出现[object module]
vite+vant+vue打包部署到tomcat静态资源找不到页面空白问题
weixin_44132285的博客
12-11 2831
1.首先要解决的是静态资源找不到的问题 需要在vite.config.js里面配置base的根目录的路径 具体操作如下： 此时配置完成之后打包放置到tomcat上静态资源加载成功但是页面还是空白 2.需要配置路由base vite是通过传参的方式配置base的 此时配置完base后重新打包 启动tomcat 页面出来了 注意：此时的base配置的名称要和你打包后放置到tomcat webapps里面的文件名要对应 比如打包生成的是dist目录你要改成mobile目录 ...
关于vue打包后图片路径找不到的问题
weixin_30479905的博客
08-07 5024
//asserts引入的静态资源是相对路径 //而static引入静态资源时必须是绝对路径 slides: [ { //当asserts引入动态绑定的静态资源时，需要以模块的方式导入资源， //将图片作为模块加载进去 src: require(‘../../../asserts/img/pic1.jpg’), ...
Vite打包静态资源无法加载问题
weixin_48328458的博客
03-28 2694
问题：本地npm run dev正常，build 之后preview和部署到github pages之后Failed to load resource:404。场景：开发前期使用静态资源作假数据，含嵌套父子组件传值。这部分尝试用引入方法时也出现加载不出来但不报错的情况。1.页面需要直接显示的部分尽量用标签直接引入。2. 文件中各处使用引入的方式使用。项目：Vue3 + Vite。
vue2/3解决项目打包后本地图片等资源找不到的问题
weixin_68658847的博客
05-23 5524
vue2/3解决项目打包后本地图片等资源找不到的问题
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
FellAsleep的博客
05-31 8599
因为vite构建的vue3项目，无法使用require导入图片，需要处理。1.新建 utils/require.js 文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值