vue文件style中设置背景文件打包后不生效问题

最新推荐文章于 2024-05-14 16:43:41 发布
最新推荐文章于 2024-05-14 16:43:41 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： vue2.0 文章标签： vue 背景图 style 路径
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wojiaomaxiaoqi/article/details/107642344
版权

在vue项目中当需要在vue文件中的style里引入背景图片时，dev环境正常显示，build以后文件布到服务器上打开发现背景图不生效。

查看控制台发现这个样式的背景图引入路径错了。

 

 

 解决办法是在打包配置的build文件夹中找到utils.js文件，在该文件中找到vue-style-loader配置的部分加上publicPath: '../../'

重新打包后放到服务器上测试，发现背景图片引入路径就正确了✌ ✌ ✌ 大功告成！

 

 

参考文章：https://segmentfault.com/q/1010000009700735

若晨工作室
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue在html中写style,webpack 打包vue文件的时候 vue文件中的style样式不生效
weixin_39923623的博客
06-09 897
package.json代码{"name": "coment","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"author": "","devD...
vue webpack build资源相对路径的问题及解决方法
01-19
默认情况webpack+vue-cli打包的css、js等静态资源路径都是绝对的，即static在根目录下，如果部署到带有文件夹目录的项目中，资源路径就会出错。 如图： 解决方法: 在webpack.prod.conf.js中，output中添加或者修改为 publicPath: ‘./’； output: { publicPath: './', path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPat
vue style属性设置背景图片的相对路径无效
weixin_55730337的博客
09-11 1174
以上的代码，在style属性中使用了相对路径，在页面元素上的内容d也没有问题。但是，背景图片依旧没有出来，甚至报错。很明显是路径有问题，当然了编写的路径肯定是没问题，但是编译后的文件可就不一定了。那我们想在style属性中设置背景图片怎么办？
Vue中全局引入stylus文件不生效的问题
最新发布
2401_84097820的博客
05-14 987
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue.js 引用背景图 background 无效的3种解决办法
热门推荐
草巾冒小子的博客
05-21 9万+
脚注生成一个脚注[^脚注] [^脚注]：这里是* * * 脚注的内容.math stackexchange.com] [1] .-行内公式，数学公式为：\伽玛（N）=（N−1）！\四\的所有在 mathbb？\伽玛（N）=（N−1）！\四\的所有在 mathbb？ \伽玛（N）=（N- 1）！\四\的所有在\ mathbb？ .-块级公式： x = \ dfrac {-b \...
用深度选择器＞＞＞ （ /deep/ ）解决vue调用第三方组件库覆盖样式不生效问题
反手一个bug的博客
10-19 1334
前言     在使用vue构建项目的时候，引用了第三方组件库，只需要在当前页面修改第三方组件库的样式以做到不污染全局样式。通过在样式标签上使用scoped达到样式只制作用到本页面，但是此时再修改组件样式不起作用。 scoped的实现原理     vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译 前的vue代码： <style scoped> .example { color:
vue 中添加背景图没反应
weixin_45412594的博客
09-08 1280
vue 中添加背景图没反应 table需要添加背景图，添加backgroundImage后发现不起作用，于是网上一番搜索，发现加了require后就好了， backgroundImage: ‘url(’ + require(‘图片地址’) + ‘)’,原来vue中的js引入图片，必须require进来。 ...
VUE项目打包（解决背景图片不显示问题）
码农小唛、
07-11 1万+
vue项目打包 vue项目打包 改变路径配置 配置背景图片路径 在命令行中用npm run build 进行打包。 查看 改变路径配置 将绝对路径改为相对路径 目标文件：项目目录 &amp;amp;gt; config文件夹 &amp;amp;gt; index.js assetsPublicPath:'/' 改为：assetsPublicPath:'./' （加一个点变为相对路径） ...
解决在vue项目中webpack打包后字体不生效的问题
10-18
总的来说，解决Vue项目中Webpack打包后字体不生效的问题主要涉及CSS编写习惯、Webpack配置以及浏览器兼容性。选择适合项目需求的方法，可以确保字体在生产环境中的正确显示。在开发过程中，及时检查控制台的元素样式...
解决Vue打包上线之后部分CSS不生效的问题
12-13
首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), 然后在utils....
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
总结来说，解决Vue打包部署到Nginx时CSS样式不生效的问题，需要关注Vue CLI的打包配置（尤其是`assetsPublicPath`），以及Nginx的MIME类型配置。正确设置这些参数，可以确保CSS和其他静态资源被正确地服务和解析，...
axios+Vue实现上传文件显示进度功能
10-17
在本文中，我们将探讨如何使用axios和Vue.js框架来实现文件上传并实时显示上传进度的功能。这个功能在现代Web应用中十分常见，特别是在处理大文件上传时，用户界面的反馈至关重要，以提供良好的用户体验。 首先，...
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
10-16
在开发基于Vue.js的项目时，常常会遇到各种问题，特别是在使用像iview这样的UI库进行打包上线后。本文主要关注的是一个常见的问题——图标不显示。这个问题在使用vue-cli和iview构建的项目中尤为突出，主要是由于...
Vue:设置背景图片&解决background-color不生效问题
sakura的博客
04-08 7999
Vue:设置背景图片&解决background-color不生效问题
vue 不生效 打包 样式_Vue打包部署到Nginx时,css样式不生效的解决方式
weixin_42510182的博客
12-23 1116
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题：Vue-cli项目在本地 使用 npm run dev的时候，页面样式是可以正常加载出来的，但是我将Vue-cli项目通过npm run build 打包生成的 dist 目录部署到Nginx之后，通过访问是无法加载出来样式的。于是乎，在网上开始寻找资料，发现大部分前辈的解决方案都是在，config的文件夹中的i...
在vue中的js部分导入图片后通过webpack无法被正确打包的问题
RotatingBlock的博客
12-30 3920
具体描述 在vue组件的js部分导入图片要使用require的形式导入，否则webpack不能正常导入，因为其路径不符合其解析规范 原因 在引入图片的时候的地址数据的时候需要使用require来讲图片作为模块引入，这样才会被webpack正确的打包的项目文件中，否则会因为webpack根据依赖打包而找不到指定的图片 如果是在HTML中的img中通过v-bind引入引入图片,src为对应的数据变量的话
vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效,可以通过样式渗透来更改插件样式
qq_42648288的博客
03-10 601
vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效,可以通过样式渗透来更改插件样式 方式一 ：/deep/ 深度选择器 <-- scss语法 --> .wrap{ .class1{ font-size:12px; } /deep/ .class2{ font-size:20px; //对所有子组件生效. /deep/ .class3{ } //...
vue+webpack 模块编译后背景图片不显示
iloki的博客
09-01 609
问题描述 在vue项目中，给一个按钮加上背景图片，路径是正确的，但是编译后（npm run build）却不显示，但是如果给按钮加上图标，编译后就可以正常显示。 问题分析 经过排查发现，问题是因为编译前后，图片路径不一致导致的。 编译后会生成一个dist文件，图片在dist下的某个文件夹下。但是代码里写的图片路径还是原来的，所以页面上显示失败。 图标可以正常显示是因为图标经过了base64转换，正常的图片就不会这么转换。 解决方案 网上找了很多办法，加什么require(‘imgUrl’),或者是改pub
给button设置背景图片不显示解决了
一页扁舟的专栏
11-13 4418
  以前给按钮设置背景图片但是图片不显示，一直没有解决，网上也找不到正确的方法。今天终于被我解决了。其实就把button的背景颜色改改就OK了。
vue中style设置的样式不生效
06-02
可能有以下几种原因导致Vue中设置的样式不生效： 1. 样式被其他样式所覆盖：在Vue中，组件中的样式是局部优先的，即组件的样式只会影响到组件内部的元素，而不会影响到组件外部的元素。如果你想要在组件外部使用组件的样式，可以将样式设置在全局样式中或者使用Vue提供的深度选择器。 2. 样式被浏览器默认样式所覆盖：有些元素默认有一些样式，例如a标签的颜色、字体等。如果你想要改变这些样式，需要使用CSS的!important属性或者使用更具体的选择器。 3. 样式被其它样式所覆盖：如果你在Vue中设置的样式被其他样式所覆盖，可以使用CSS的!important属性或者更具体的选择器来覆盖它们。 4. 样式没有正确地绑定到组件上：在Vue中使用样式需要注意一些细节，例如class和style的绑定方式。如果你的样式没有正确地绑定到组件上，可以检查一下绑定方式是否正确。 希望以上这些解决方案能够帮助你解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值