vue.js打包后图片路径错误怎么办

vue.js打包后图片路径错误的解决办法:1、修改【assetsPublicPath: ‘./’】;2、打开【webpack.prod.conf.js】,在output增加【publicPath: ‘./’】。

vue.js打包后图片路径错误怎么办

vue.js打包后图片路径错误的解决办法:

【相关文章推荐:vue.js

解决办法如图:

(1)、

立即学习“前端免费学习笔记(深入)”;

47ea417fd9bae4ceb667f583c937e20.png

修改assetsPublicPath: ‘./’

(2)、打开webpack.prod.conf.js,在output:增加publicPath: ‘./’

59e6b016db80e07e42a968f00dfb177.png

虽然解决了资源路径的引用问题,但是资源里面的背景图片还是不显示, background: url(“../../assets/images/logo-index.png”) no-repeat;被相对打包后变成了url(static/img/logo-index.2fbf2.png) no-repeat所以我们要保留css引用图片的正常路径,即:url(../../static/img/logo-index.2fbf2.png) no-repeat

那么就需要修改build文件夹下的utils.js代码,如图所示:

6f3b90ca5ee364f5446549b1263999f.png

添加publicPath:’../../’这一行代码,这样不论是字体还是图片的引用问题都能解决。

相关免费学习推荐:javascript(视频)

以上就是vue.js打包后图片路径错误怎么办的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3022925.html

(0)
上一篇 2025年3月13日 06:00:48
下一篇 2025年3月13日 06:00:57

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue.js图片怎么渲染

    vue.js渲染图片的方法:首先初始化列表;然后获取上个页面带过来的参数,获取api,app,foot;接着向后传递参数;最后渲染本地图片。 【相关文章推荐:vue.js】 vue.js渲染图片的方法: 带参数传值 本地美食 立即学习“前端…

    2025年3月13日
    100
  • vue项目能直接引入vue.js吗

    vue项目能直接引入vue.js,引入方法:1、是使用脚手架工具【vue-cli】;2、二是直接在项目引入【vue.js】,代码为【var vm = new Vue({el: ‘#accountManage’,dat…

    2025年3月13日
    200
  • vue.js是什么软件

    vue.js是什么软件是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用,Vue的核心库只关注视图层,方便与第三方库或既有项目整合。 【相关文章推荐:vue.js】 Vue是一…

    2025年3月13日
    200
  • 微信小程序能不能用vue.js

    微信小程序能用vue.js,mpvue是一款使用【Vue.js】开发微信小程序的前端框架,使用此框架,开发者将得到完整的【Vue.js】开发体验,同时为H5和小程序提供了代码复用的能力。 【相关文章推荐:vue.js】 微信小程序能用vue…

    2025年3月13日
    200
  • vue.js中如何让文字居中

    vue.js中让文字居中的方法:首先把css部分拿下来封装成一个Vue组件,并实例化;然后给组件绑定动态的数据;最后接收数据并把数据绑定到内容中。 【相关文章推荐:vue.js】 vue.js中让文字居中的方法: 首先我们先把css部分拿下…

    2025年3月13日
    200
  • vue.js中的插槽是什么

    vue.js中的插槽是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。 【相关文章推荐:vue.js】 什么是插槽? 插槽(Slot)是Vue提出来的一…

    2025年3月13日
    200
  • vue.js怎么让网页定时刷新

    vue.js让网页定时刷新的方法:1、执行函数【setTimeout(function(){}, milliseconds)】;2、在执行定时器前先执行一次获取接口数据的操作函数。 【相关文章推荐:vue.js】 vue.js让网页定时刷新…

    2025年3月13日
    200
  • vue.js与react.js区别是什么

    vue.js与react.js区别:1、vue可以直接在vue文件中使用html标签,数据绑定时类似angular,可以进行条件渲染;2、【react.js】则采用了jsx语法,运用虚拟DOM的概念进行DOM对页面元素进行渲染。 【相关文章…

    2025年3月13日
    200
  • vue.js中如何代码高亮

    vue.js中代码高亮的方法:首先需要下载依赖,并在【main.js】文件中导入包;然后在【main.js】文件中自定义一个指令;最后在vue文件中使用相关指令即可。 本教程操作环境:windows10系统、vue2.9,本文适用于所有品牌…

    2025年3月13日
    200
  • vue.js怎么用正则校验

    vue.js用正则校验的方法:首先定义const;然后使用test方法,代码为【if(reg.test(data)){console.log(“通过正则验证”);}else{console.log(“未通…

    2025年3月13日
    200

发表回复

登录后才能评论