关于vue-cli脚手架打包后获取本地大图片或大文件报404的解决办法

最新推荐文章于 2021-04-07 09:42:29 发布
最新推荐文章于 2021-04-07 09:42:29 发布
阅读量557 收藏 1
点赞数 1
分类专栏： 开发中遇到的问题 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/junjie_jh/article/details/105521767
版权
最近帮公司同事看一个比较棘手的问题，查了好久终于找到了解决方案，记录下来方便以后碰到这个问题的小伙伴参考。是这样的，这个项目用vue-cli脚手架构建的项目，使用了 element-ui 中的字体图标，打包之后出现element-icons.ttf报404的错误。查看网上的解决办法都是在webpack中配置，但是该项目没有配置专门的wabpack，只有一个 vue.config.js文件，查...
摘要由CSDN通过智能技术生成

最近帮公司同事看一个比较棘手的问题，查了好久终于找到了解决方案，记录下来方便以后碰到这个问题的小伙伴参考。
是这样的，这个项目用vue-cli脚手架构建的项目，使用了 element-ui 中的字体图标，打包之后出现element-icons.ttf报404的错误。
错误图片
查看网上的解决办法都是在webpack中配置，但是该项目没有配置专门的wabpack，只有一个 vue.config.js文件，查了好久没有解决，突然想到vue官方有提供vue-cli脚手架配置的说明，具体请看 vue-cli webpack相关配置 。vue将小于4kb的文件默认为内联文件，不会向服务器发送请求，可以通过 chainWebpack 调整内联文件的大小限制。例如，下列代码会将其限制设置为 10kb：

// vue.co
最低0.47元/天 解锁文章
前端小书包
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue项目打包之后图片/字体路径404
weixin_34268753的博客
05-30 1643
vue项目在打包之后 static 中图片路径不对 问题原因：在把vue项目打包之后提交到github上 在github pages查看页面的时候发现图片加载 不出来，控制台显示图片 404 。 查看图片路径时发现404的地址： https://xxx.github.io/dist/static/css/static/img/xxx.jpg 正确路径应该为： https://xxx.git...
vue-cli脚手架-bulid下的配置文件
08-27
Vue-cli脚手架bulid下的配置文件 Vue-cli脚手架bulid下的配置文件是Vue.js开发过程中的一部分，主要用于创建和配置Vue.js项目。通过学习和掌握这些配置文件，可以帮助开发者更好地理解Vue.js项目的结构和工作原理，...
vue中data中引用本地图片报错404
weixin_30613343的博客
04-19 582
首先说明vue-cli中assets和static两个文件的区别 1.assets在项目编译的过程中会被webpack处理理解为模块依赖，如果执行npm run dev或npm run build命令行，assets会被编译，导致路径发生变化，所以如果写成绝对路径，会存在问题 2.static在项目编译的过程中webpack不会被解析，他相当于是存放第三方文件的地方，路径可写成绝对路径 总结...
Vue项目打包后，背景图片不能显示，提示404解决方法
qq_32851969的博客
06-05 754
解决方法：打开项目找到图中文件，修改config下面的index.js build: { assetsPublicPath: './' } 然后再打开build/utils.js增加 找到generateLoaders方法增加 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader',
vue-cli引入本地图片
baiyikai的博客
03-20 1161
不能直接写在标签里面 错误示范： <img src="@/assets/image/worship/musiclogo.png"> 需要先通过require引入,然后再调用 <img :src="worshipPerson.picture"> data(){ somedata:{}, musicLogo:require('@/assets/image/worship...
vue 从数组中引入本地图片报404错误
weixin_42065274的博客
04-09 1037
vue 从数组引入本地图片报404错误 问题描述：往数组中添加本地图片，在页面中一直提示图片资源404的错误 这个是引入图片数组 解决方法：就是在路径前添加 require 就可以啦~ 这样问题就解决了~ ...
解决vue-cli脚手架打包后vendor文件过大的问题
10-17
总结一下，解决Vue CLI脚手架打包后vendor文件过大的问题，主要可以从以下几个方面着手： 1. 将不常更改的库通过CDN引入，减少vendor文件的大小。 2. 配置Webpack的externals，使Webpack不打包CDN引入的库。 3. ...
vue-cli脚手架的.babelrc文件用法说明
10-14
`.babelrc` 文件是 Vue CLI 脚手架中的一个重要配置文件，用于定义 Babel 的转码规则和插件。Babel 是一个广泛使用的 JavaScript 编译器，它允许开发者使用 ES6+ 甚至实验性语言特性，然后将这些新特性转换为广泛...
vue-cli脚手架打包静态资源请求出错的原因与解决
10-16
主要给大家介绍了关于vue-cli脚手架打包静态资源请求出错的原因与解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-cli具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue-cli中打包图片路径错误的解决方法
01-19
最近第一次使用vue-cli构建项目，第一次打包部署到服务器上的时候出现图片加载不出来，结合网上的方法，终于给摸索出来。将项目部署到服务器上分为两种：一种是直接部署到服务器的根目录，另外一种是部署到服务器的...
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
11-30
最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下 一、首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改，改为 目的是将资源文件的引入路径，改为相对地址（相对index.html） 二、此时html中的js、css、img引入均没有问题，但是css中的background-image还是报404 此时的问题原因是，使用了相对地址后，在css进行引入的图片路径，其相对的是css文件的路径 此时的
详解vue-cli脚手架中webpack配置方法
12-03
Webpack 是一个强大的模块打包工具，它能够处理 JavaScript、CSS、图片等静态资源，将它们打包成优化过的静态文件，用于前端应用的部署。Webpack 支持 CommonJS、AMD 以及 ES6 模块化规范，还能处理模块间的依赖关系...
vue-cli3中配置alias和打包加hash值操作
11-19
在Vue CLI 3中，配置项目以实现JS文件打包时包含hash值以及简化引入路径的alias设置是非常重要的优化步骤。这不仅可以确保缓存的有效管理，还可以提高开发效率。以下是详细的解释和步骤： 首先，让我们来看如何为JS...
vue-cli history模式实现tomcat部署报404的解决方式
10-16
在Vue.js应用开发中，Vue CLI提供了一个方便的脚手架工具，可以帮助开发者快速搭建项目。其中，`history`模式是Vue Router的一种路由模式，它可以让应用的路由表现得更像传统的Web应用，使得URL无需包含哈希(`#`)...
vue-cli3-template：基于Vue-cli3建造的脚手架项目模板
01-31
项目介绍基于Vue-cli3建造的前端开发脚手架项目模板，主要包括以下内容：Webpack4.x性能调优配置，Vue.js全家桶，移动端vw适应，单元测试等功能，可以参考，欢迎大家围观指教！项目特点特征 巴别塔 VueRouter 威克斯...
vue-cli项目中引入本地图片资源
RETURNTO7的博客
04-07 465
vue-cli项目中引入本地图片资源解决方法 最近在做一个前后端分离项目，先搞一个登录页面验证码图片的时候卡壳了，折腾了很久，相信有很多人都会有这样的经历，所以记录一下，让后面的人能少抓自己的头发哈哈哈哈。。。向下面这样能直接访问到图片 <img src="../../static/1.png" alt="" srcset="" style="width:90px;height:25px;"> 但是我绑定src属性之后就不行了，这里提示一下因为webpack打包后路径就变了，你在网页查看源代
解决vue项目打包界面和背景图片报错 404
SHALLNY
05-05 6511
项目进展到最后，vue框架即将完工了，在最后到打包中，又遇到一个大坑 npm run build 在执行命令打包后，发现打开dist文件内的index.html后，界面空白，并且在控制台处报错为404，查找不到对应到css。 此时为路径问题，解决方法为： 找到项目文件夹内到config –&gt;index.js –&gt;修改路径‘./‘ 此时重新打包即在浏览器可以完美打开了...
vue加跨域代理静态文件404_vue-cli 设置跨域代理 线上地址报404
weixin_39785723的博客
12-19 220
vue-cli 设置跨域代理，本地正常访问，线上地址报404。这是什么原因？vue-cli中跨域代理设置：module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api': {target: 'https://xxx.xxx-xxx.com',changeOr...
vue 显示图片404的解决办法
qq_一望损莓苔的博客
11-07 3734
&lt;img class="" :src="avatar?avatar:defaultNoImage" :onerror="defaultImg"&gt; data () { return { defaultImg: 'this.src="' + require('./images/person.png') + '"',   avatar: './images/perso...
vue-cli脚手架
最新发布
07-27
Vue-cli脚手架是Vue官方提供的一个工具，用于快速生成一个Vue项目的模板。它预先定义了项目的目录结构和基础代码，可以帮助开发者更快速地搭建一个Vue项目的框架。通过Vue-cli，开发者可以使用简单的命令完成项目...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值