Vue在WebPack项目中引用资源的路径问题

最新推荐文章于 2023-06-02 00:05:47 发布
最新推荐文章于 2023-06-02 00:05:47 发布
阅读量370 收藏
点赞数
分类专栏： 前端 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenjuntao520/article/details/120061653
版权 
在使用webpack打包方式组织Vue项目时，会遇到引用的图片等资源无法被正确加载的问题，这是因为路径在经过webpack打包后会发生变化，需要把路径用require()包裹，比如require('@/assets/img/a.jpg')。这样才能正确引用到资源。
我辈岂是蓬蒿人225
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网站子目录部署VUE webpack 打包资源文件路径的正确引用方式1
08-03
似乎所有问题都解决了，但有个问题没有解决，就是如果我在css引了了图资源，webpack并不能很好的处理这的资源路径“m”件夹是站下的个录，如果我在开发的时候，
Vue项目用webpack打包后，预览时资源路径出错（文末有vue项目链接分享）
weixin_33835103的博客
04-16 657
最近用vue写了一些项目，项目写完之后需要打包之后才能放到网上展示，所以在这里记录一下项目打包的过程以及遇到的一些问题。 -------------------------------------------------- 分割线 -------------------------------------------------- 一、项目打包过程： 1.vue项目写完后，首先在...
【108】Vue-router 2.8.1 懒加载使用Webpack 3 的import() 语句出错的解决办法
zhangchao19890805的专栏
02-09 2722
错误重现 文件结构： blog108 │ ├─.babelrc ├─.npmrc ├─index.template.html ├─package.json ├─webpack.config.js ├─yarn.lock └─src │ ├─App.vue ├─home.vue ├─main.js ├─rout...
vue打包路径.html问题,解决vue+webpack打包路径的问题
weixin_39968490的博客
06-19 381
最近写了一个vue小项目，不想单独作为一个web项目发布，所以就准备放到资源项目的public文件夹下，遇到一些小问题，在此总结一下。资源路径如下： public目录配置的访问路径为”/”，在这样的情况下，我们的访问路径就变成了”域名/vue-demo”。访问的时候发下程序未报错，但是页面一片空白。此前也这样发布的项目都没有问题，但这次是怎么回事呢？仔细探索后发现是vue-router搞得鬼。因...
webpack引用动态资源路径错误的解决方案
王海旭的博客
03-13 2872
问题：打包的项目为根目录引用时(ip:端口/index）,如果资源通过js动态加载。会导致路径引用错误需求：项目需要挂载在主站的次级目录（如：*/marketing/）解决方法把项目打包为相对路径； 通过配置vue-router，打包部署包时加上路由前缀（如：/marketing/路由A）; fis.hook('relative'); fis.match("**
vue3+webpack5+ts打包的时候，项目入口文件引用.vue文件报错
m0_37536891的博客
06-02 192
原因是没有识别到vue文件类型，需要把.vue文件定义为module类型。解决： 在根目录新建env.d.ts文件，内容如下。打包的时候，项目入口文件引入.vue文件时报错，
网站子目录部署VUE webpack 打包资源文件路径的正确引用方式
weixin_34032827的博客
11-23 346
webpack 是目前使用最为火热的打包工具，各大知名的框架类库都用其打包，国内使用最近也火热起来。它在单页应用和类库打包上帮助许多人从代码管理中解脱了出来，成为了当下风靡一时的打包工具。 但是坑也很多，比如说图片，字体等文件的路径。 刚开始用webpack的同学很容易掉进图片打包这个坑里，比如打包出来的图片地址不对或者有的图片并不能打包...
Vue CLI3搭建的项目中路径相关问题的解决
12-12
最近在试水 Vue CLI 3，并且尝试配置一个多页面（多应用）项目出来，期间又遇到各种路径问题，于是…于是有了下面的唠叨。 以下都是基于 Vue CLI 3 来举例说明的，使用 2.x 版本的其实也类似 首先，参考 官方文档...
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
01-19
使用vue打包，通过css引用图片资源。 .img { height: 500px; width: 100%; background: url(./assets/img/1.jpg) no-repeat; background-size: 100%; } 热更新开发环境的效果是这样 但打完包出来的页面却报...
详解vue-cil和webpack中本地静态图片的路径问题解决方案
01-21
本文介绍了vue-cil和webpack中本地静态图片的路径问题解决方案，分享给大家，具体如下： 1 本地图片动态绑定img的src属性 一般我们在html中或者vue组件文件中引用图片是这样，这是不需要做特别处理的 我们将图片放...
vue webpack打包后图片路径错误的完美解决方法
12-08
项目用run dev build 打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，...虽然解决了资源路径的引用问题，但是资源里面的背景图片还是不显示， backgroun
27 webpack中资源文件路径问题
sinat_41212418的博客
12-13 1434
资源文件路径问题 Webpack中涉及到很多路径的操作，文件的生成路径，资源的引入路径等等，有时候配置的小差异，就会导致路径不正确的问题。同时在之前的学习中，构建出的项目文件全部是在同一个文件夹dist目录下，较好的实践是同一类型的资源应该是在一个统一的文件夹下面，比如生成的JavaScript文件全部放在同一个文件夹下面，Css文件全部放在同一个文件夹下面。此章节针对于上述两个问题给出具体的解决方案。 生成资源文件夹 假设项目中使用了JavaScript，Css，字体图标和其他媒体资源，我们希望在构建完成
JSON parse error: Unrecognized token XXX: was expecting (‘true‘, ‘false‘ or ‘null‘)；
热门推荐
123
04-06 1万+
前端ajax请求java后台，后台返回给前台500错误，返回结果为 {"result":false,"code":500,"info":"JSON parse error: Unrecognized token 'username': was expecting ('true', 'false' or 'null'); nested exception is com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'usern
Vue实现PDF导出和打印功能
123
01-13 1万+
在Vue页面上实现PDF导出和打印功能依赖于两个npm插件，分别为vue-to-pdf和vue-easy-printer。 安装命令： npm i vue-to-pdf --save npm i vue-easy-printer --save 在main.js/App.js中加入引用： import vueToPdf from 'vue-to-pdf'; import VueEasy...
MIME type (‘text/html‘) is not a supported stylesheet MIME type, and strict MIME checking is enable
123
04-06 1万+
html中引入css，控制台报错because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled。 html是这样写的： <link rel="stylesheet" href="/ta/font-awesome/css/font-awesome.min.css"/> 出现这个问题不要认为是type="text/html"没加
This is a bug in `node-gyp`. Try to update node-gyp and file an Issue if it does not help解决方法
123
05-06 8299
解决方法：运行npm install -g node-gyp 问题原因：因为node-gyp老版本有bug（据网上说是v5 v6的问题），导致在npm install时报错，运行上述命令会安装8.0.0版本的node-gyp，就可以解决问题
使用ElementUI走马灯Carousel组件加载慢的解决方案
123
09-29 5284
项目中使用ElementUI的走马灯组件Carousel时，发现组件渲染速度比较慢。一开始以为是后台接口处理速度慢，在后台统计了方法执行时间后发现很快。于是猜想是因为数据量太大，Carousel渲染速度就会比较慢。查阅ElementUI官方文档发现走马灯并不支持懒加载，所以就尝试了自己实现懒加载。思路是先只获取第一页和第二页的数据，然后用户点击切换的时候，再一页一页加载。改完之后debug时发...
用HT for Web实现3D列车行进动画
123
08-30 5029
HT for Web有一套强大的基于WebGL技术的图形引擎，可以用js代码实现3D图像的建模和动画。现在用HT for Web来实现一个3D列车行进的动画来带大家了解一下如何使用这套框架。 <script src="js/ht.js"></script> <script src="js/ht-animation.js"></scrip...
el-table设置边框后底部边框无法展示的解决方法
123
09-03 3883
在使用Element-UI的el-table组件时，使用cell-style给表格增加边框后，最底部的一条横线无法显示，这时候不要怀疑是自己的css写的不对，原因在于el-table的样式文件中给.el-table这个class设置了position:relative，导致无法正确显示。只需要把样式文件中的这个属性删除掉即可，暂时没发现有什么影响。 ...
vue项目中的assets
最新发布
06-03
在 Vue 项目中，assets 文件夹是用来存放需要经过 webpack 构建的静态资源，比如 CSS、JS、图片等。通常我们会在 assets 文件夹中创建一个名为 images 的子文件夹，用来存放图片资源。 与 public 文件夹不同的是，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值