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

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

#vue #vue打包

本文详细介绍了如何通过修改Webpack配置解决资源路径问题，包括设置config/index.js中的assetsPublicPath为'./'解决js与css文件路径问题，以及在build/utils.js中使用ExtractTextPlugin插件并添加publicPath配置解决静态图片与icon的路径问题。

步骤1：设置config/index.js

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

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

 

步骤2：设置build/utils.js

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

共需配置两处

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

[已解决]electron-builder vue 打包后iconfont/element-ui字体图标不显示问题
张小斌
05-27 9602
element-ui字体图标无效是因为文件引用路径错误，将其样式资源作为静态资源打包，就可以解决。
Create React App antd-mobile 打包到子目录下出现无法显示、显示空白、Unexpected token 等问题
LiFangHui_的博客
07-11 873
首先我的是history模式，服务器是iis 假如我打包之后要放在agent目录下 现在目录情况了解了，再来看代码配置那边 首先是路由，我用的是React-Router4 然后package.json 最后是config-override.js （因为这个脚手架隐藏了webpack的配置文件，所以我使用了react-app-rewired，当然你也可以用eject显示web...
vue项目使用webpack打包后部署到服务中无法读取静态资源
followly的博客
12-11 2453
在打包vue项目时，因为通过脚手架生成的项目，部署到服务中会出现读取静态资源404的情况
解决vue打包之后静态资源图片失效的问题
11-27
1、问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！ 2、解决方法之一 静态资源static存放位置放在src目录下   你可能会问为什么放在src目录下？放在跟src同级目录下不可以吗？好吧，一开始我也是放在src同级目录下，但是在某个css文件中引入背景图片的时候打包之后图片失效，我是这样引入的   实践证
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
FellAsleep的博客
05-31 8729
因为vite构建的vue3项目，无法使用require导入图片，需要处理。1.新建 utils/require.js 文件。
vue打包不显示图标
qq_59717525的博客
08-07 239
在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 1621
在vue打包完，发现很多问题，来整理下： 第一：使用element框架的icon时候，开发环境下是没有问题的，打包完以后出现小方块，页面不显示， 解决办法：找到utils.js文件，加publicPath: '../../' function generateLoaders (loader, loaderOptions) { const loaders = options.u...
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
hbuilder打包unpackage>res>icons>192x192未找到
qq_35919264的博客
01-11 1858
转载这里就是方法 以防万一，再写一遍 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...
vue3+vite打包后静态资源不显示
Mjxiaomihu的博客
01-04 6851
vue3+vite打包后静态资源不显示
vue编译图片不显示，require()与require().default区别
weixin_45288512的博客
08-31 1425
vue打包图片，图片地址不存在或者出现[object module]
vite+vant+vue打包部署到tomcat静态资源找不到页面空白问题
weixin_44132285的博客
12-11 2869
1.首先要解决的是静态资源找不到的问题 需要在vite.config.js里面配置base的根目录的路径 具体操作如下： 此时配置完成之后打包放置到tomcat上静态资源加载成功但是页面还是空白 2.需要配置路由base vite是通过传参的方式配置base的 此时配置完base后重新打包 启动tomcat 页面出来了 注意：此时的base配置的名称要和你打包后放置到tomcat webapps里面的文件名要对应 比如打包生成的是dist目录你要改成mobile目录 ...
关于vue打包后图片路径找不到的问题
weixin_30479905的博客
08-07 5059
//asserts引入的静态资源是相对路径 //而static引入静态资源时必须是绝对路径 slides: [ { //当asserts引入动态绑定的静态资源时，需要以模块的方式导入资源， //将图片作为模块加载进去 src: require(‘../../../asserts/img/pic1.jpg’), ...
Vite打包静态资源无法加载问题
weixin_48328458的博客
03-28 2795
问题：本地npm run dev正常，build 之后preview和部署到github pages之后Failed to load resource:404。场景：开发前期使用静态资源作假数据，含嵌套父子组件传值。这部分尝试用引入方法时也出现加载不出来但不报错的情况。1.页面需要直接显示的部分尽量用标签直接引入。2. 文件中各处使用引入的方式使用。项目：Vue3 + Vite。
vue2/3解决项目打包后本地图片等资源找不到的问题
weixin_68658847的博客
05-23 5822
vue2/3解决项目打包后本地图片等资源找不到的问题
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值