程序员经验分享-hwhale

vue项目background-image引入背景图报错

2023-11-04

之前写好的代码明明运行很正常，今天早上突然在预发环境挂掉了

[31mERROR in ./node_modules/extract-text-webpack-plugin/dist/loader.js?{"omit":1,"remove":true}!./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false,"root":"C://Program Files (x86)//Jenkins//workspace//novice_region//front_page//src//assets"}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-6fa1d485","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/page/newStockDetail.vue
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../assets/ns_detail_bg.png' in 'C:\Program Files (x86)\Jenkins\workspace\novice_region\front_page\src\page'

怎么回事呢？
仔细排查后，本地运行正常，并不会出现这个问题，但是测试环境一直就是这个错误，有点懵逼。
没办法，只能仔细对比两个环境了。
仔细对比后发现配置都没有变动，那就看看版本吧，发现昨天vue版本升级了，导致了这个问题！
查阅资料后发现：
vue2.5及以下版本background-image： url('../assets/btn-bgc.png')这种写法没有问题,
但是2.6就会出现这个问题,和webpack配置相关 .vue2.6用的是webapack4.0导致
所以换一种写法就好background-image： url('~@/assets/btn-bgc.png')

关于webpack资源处理的规则,分为相对路径,没有前缀的路径,带~的路径,相对根目录的路径

1.相对路径: "./assets/logo_blue.png" 
2.没有前缀的路径 "assets/logo_blue.png" 被webpack解析为相对路径
3.带~的路径  "~@/assets/theme/logo_blue.png" 被webpack解析为 require(src/assets/theme/logo_blue.png) 动态引入 
@在webpack 被resolve.alias配置下等价于/src
4.相对根目录的路径 "/assets/logo_blue.png" webpack不解析
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

webpack学习

vuejs

javascript

WEBPACK

vue项目background-image引入背景图报错 的相关文章

  • 使 Knockout applyBindings 将选择选项视为数字

    我将 Knockout 与 html select option 结合使用 请参阅Fiddle http jsfiddle net hf5gb

  • 当代理关闭并启动时，Node JS mqtt 客户端未收到订阅的消息

    我创建了一个 mqtt Node js 客户端 我的连接选项如下 mqttOptions clientId 100 keepAlive 1000 clean false reconnectPeriod 1000 will willMessa

  • HTMLPanel 中的 JavaScript

    我想在 HTMLPanel 元素中包含 Javascript 代码 但它不起作用 请你帮助我好吗 提前致谢 脚本 pro js alert hello 使用 HTMLPANEL 不起作用 不显示警报 我认为应该是相反的 HTMLPanel

  • 在 sinon.js 中存根和/或模拟类？

    我已经为我的应用程序创建了一个数据库包装器 如下所示 为了测试它 我显然想替换实际的数据库 我可以创建一个新类来模拟query方法并捕获那里的所有输入 但是使用sinon js看起来更合适 但是我该如何使用它呢 Is the mock or

  • 如何使用 jquery 在 ajax 调用中设置标头

    我需要从我自己的应用程序调用 Office 365 Rest API 当我在同一浏览器会话上复制并粘贴 url 时 我可以看到一些 XML 如果我将该 URL 粘贴到隐身窗口中 则会收到以下错误 The custom error modul

  • 如何在 Atom 中启用 .vue 文件的语法突出显示？

    我开始使用 Vue js 我遇到的第一个问题是我的 IDE Atom 无法美化我的 vue 文件 这一切都只是白色的文字 如何让 Atom 正确突出显示 vue 文件 语言 vue https atom io packages langua

  • 如何使用react-native-router-flux在模态中进行导航

    我需要在我的反应本机应用程序中的模式中进行导航 使用新版本的react native router flux 似乎不可能做到这一点 我可以创建一个垂直动画来显示下一个场景 这与场景顶部的模态不同

  • 使用 ReactJS 突出显示文本

    我试图突出显示与查询匹配的文本 但我不知道如何让标签显示为 HTML 而不是文本 var Component React createClass highlightQuery function name query var regex ne

  • 如何向 DOM 添加支持 Angular 的元素？

    我想以编程方式添加一些支持 Angular 的 DOM 元素 实际上 我可能需要添加自定义组件 我该怎么做 这是一个简单的小提琴来演示这个问题 http jsfiddle net ZJSz4 2 http jsfiddle net ZJSz

  • IE9：奇怪的 JavaScript 错误

    我尝试在网站中显示 Google DFP 广告横幅时遇到错误 这些广告在除 IE9 之外的所有浏览器中展示 您可以在此处查看带有横幅的简单测试页面 离线演示 错误是 抛出异常但未捕获 google ads js 第 34 行字符 474 I

  • Javascript：一般访问函数参数

    这是我所拥有的 var log function arg1 arg2 console log inside arg1 arg2 var wrap function fn return function args console log be

  • 如何从 HTML 图表中删除网址 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在 HTML 中创建一个图表 我正在使用 API amCharts 但问题是它在图表中显示文本 amchart 我怎样才能删除该文本

  • 如何通过 Web-Workers 传递自定义类实例？

    由于 Web Worker JSON 在线程之间序列化数据 因此这样的方法不起作用 worker js function Animal Animal prototype foobar function self onmessage func

  • 如何将 props 传递给模态

    我有一个购物应用程序 我可以在其中映射一些产品并将它们呈现在屏幕上 用户可以增加 减少数量 当数量达到 1 并且用户点击减少时 一些中间件会介入并询问他们是否确定要将其从购物篮中删除 如果他们单击 否 则会关闭模式并将其留在购物篮中 如果他

  • 样式表何时添加到 document.styleSheets

    我正在尝试使用 javascript 动态添加 css 样式表规则 例如示例 2here https developer mozilla org en DOM CSSStyleSheet insertRule 它在大多数情况下都有效 但似乎

  • 如何在 Strongloop 环回脚手架项目中覆盖基本用户？

    给定一个使用以下命令创建的全新项目 slc lb project myapp 我该如何更换 user 模型中models json带有 customer 模型放置在 models目录 客户应该有登录 注销等方法 并且 用户 不应该作为 AP

  • 对数滑块

    我有一个值范围从 0 到 100 的滑块 我想将它们映射到 100 到 10 000 000 的范围 我在网上看到过一些函数 但它们都是用 C 编写的 我需要它在 JavaScript 中 有任何想法吗 您可以使用这样的函数 functio

  • 如何使我的响应式网站在手机上支持“请求桌面网站”？

    我有一个响应灵敏的动态网站 Java Servlet 驱动且完全手工编码 由于它是一个返回数据表的科学站点 因此某些选项在较小的视口宽度下不可用 然而 可能有些用户更喜欢在桌面网站上挣扎才能访问这些选项 我希望适应他们 我的问题是 对于 i

  • JSON 数据的动态表单（不同类型）

    我尝试使用 JSON 中的数据在 AngularJS 中创建动态表单 我有这个工作 HTML p p

  • 理解“窗口”对象[重复]

    这个问题在这里已经有答案了 可能的重复 JS 窗口全局对象 https stackoverflow com questions 10035771 js window global object 如何window对象工作 我知道它是顶级对象并

随机推荐

  • hosts ip 指向ip_【好玩的网络-第4期】DNS硬核科普，你是怎么上网的？DNS里都有啥？传说中的hosts文件又是啥？...

    好玩的网络 系列面向普通人的网络科普视频 我在我的哔哩哔哩账号 up主 旋律果子 更新 好玩的网络 视频版 在我的知乎 用户 曾彦 专栏更新 好玩的网络 文字版 最新消息以及预告在我的个人网站www yzeng1995 top发布 大家可以

  • 09.MyBatis整合PageHelper实现分页功能

    09 MyBatis整合PageHelper实现分页功能 MyBatis可以使用第三方的插件来对功能进行扩展 分页组手PageHelper是将分页的复杂操作进行封装 使用简单的方式即可获得分页的相关数据 开发步骤 导入通用的PageHelp

  • STM32的全系列MCU的ID号的地址及读取方法

    在STM32的全系列MCU中均有一个96位的唯一设备标识符 在ST的相关资料中 对其功能的描述有3各方面 用作序列号 例如 USB 字符串序列号或其它终端应用程序 在对内部 Flash 进行编程前将唯一 ID 与软件加密原语和协议结合使用时

  • 全桥DCDC输出电压和变比占空比的关系

    在做各种数千瓦到数十千瓦的变换器的过程中 辅助电源总是如影随形 但是我从来没有专门去做过它们 有时候遇到这方面的问题需要解决的时候 对其基本原理竟一时懵逼了 一下图为例 列出今天的疑问 输出电压和占空比 变压器变比的关系 经过一番思考和查阅

  • vue-styled-components

    1 安装 npm install vue styled components 2 在一个组件中引入

  • LabVIEW必知

    介绍 基础知识 数学函数 矩阵数学 数据采集 介绍 传感器和信号 硬件 采集数据 操作数据采集系统需要软件 而这正是LabVIEW发挥作用的地方 LabVIEW旨在与National Instruments数据采集系统一起使用 在收集数据之

  • 微服务（Microservice）那点事

    WHAT 什么是微服务 微服务简介 这次参加JavaOne2015最大的困难就是听Microservice相关的session 无论内容多么水 只要题目带microservice 必定报不上名 可见Microservice有多火 最喜欢其中

  • VUE3 学习笔记（七）动态样式 class 实现

    目录 一 绑定 HTML class 1 绑定对象 2 绑定数组 3 在组件上使用 二 绑定内联样式 1 绑定对象 2 绑定数组 3 自动前缀 4 样式多值 数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式 因为

  • php GD库做水印功能，合并图片

    1 创建一个适应大小的底层图片 2 读取需要拼接的图片 dst data file get contents dst src dst img imagecreatefromstring dst data 3 把读取的图放到指定的位置 这里需

  • Redis吊打面试官的经典面试题整理

    编程界的小学生 1 Redis为什么是key value的 为什么不是支持SQL的 这题第一眼看到有点懵逼 选择key value的原因 key value简单粗暴 使用方便 效率更佳 为什么不支持sql 因为redis的内存模型是一个ha

  • OSG中的示例程序简介

    1 example osganimate一 演示了路径动画的使用 AnimationPath AnimationPathCallback 路径动画回调可以作用在Camera CameraView MatrixTransform Positi

  • apt-get 自动补全包名

    转自 http blog csdn net seasonkky article details 6321150 现象 bash的一般命令补全正常 apt get install 的包名无法自动补全 解决 实际上 在运行这句后 就可以自动补全

  • Go(六)切片

    目录 引子 切片 切片的定义 切片的长度和容量 切片表达式 使用make 函数构造切片 切片的本质 判断切片是否为空 切片不能直接比较 切片的赋值拷贝 切片遍历 append 方法为切片添加元素 切片的扩容策略 使用copy 函数复制切片

  • onInterceptTouchEvent和onTouchEvent调用关系详解

    一 onTouch onTouch是View中OnTouchListener接口中的方法 处理View及其子类被touch是的事件处理 当然 前提是touch时间能够传递到指定的view Q1 为什么会传递不到呢 Java代码 Interf

  • 供需匹配优化优化算法【matlab】

    一 算法流程 应用背景 共享停车预约系统的构成主体 即车位供给用户 停车用户和运营管理者 并对预约系统的运营模式进行了分析 为本文所构建的模型提供了相应的理论基础 其次 在已知所有预约需求停车信息的前提下 基于介绍的定时型决策预约运营模式

  • 光线追踪渲染实战（四）：微平面理论与迪士尼 BRDF，严格遵循物理！

    项目代码仓库 GitHub https github com AKGWSB EzRT gitee https gitee com AKGWSB EzRT 目录 前言 0 前情回顾 1 微平面理论 2 BRDF 介绍 3 迪士尼原则的 BRD

  • python读取excel文件，对内容分类排序，显示每类的前5行

    先读取excel文件 然后再分类显示 创建文件 import pandas as pd data pd read excel path1 path1Excel路径 data1 data groupby by 字段 head 5 print

  • [电动智能汽车-1]：原理 - 纯电动汽车的工作原理

    目录 第1章 纯电动汽车的工作原理 1 1 汽车的演进路线 1 2 传统汽车的简化模型 1 3 纯电动汽车的简化模型 1 4 纯电动汽车的驱动模型 1 5 电动车与燃油车的比较 第2章 纯电动汽车 非智能驾驶 内部工作原理 2 1 逻辑结构

  • 用C语言如何编程一道选择题,使用C语言编写一道简单的编程题

    C语言 是一种通用的 过程式的编程语言 广泛用于系统与应用软件的开发 具有高效 灵活 功能丰富 表达力强和较高的移植性等特点 在程序员中备受青睐 C语言是世界上最流行 使用最广泛的高级程序设计语言之一 今天小编要为大家分享的一篇教程就是 使

  • vue项目background-image引入背景图报错

    之前写好的代码明明运行很正常 今天早上突然在预发环境挂掉了 31mERROR in node modules extract text webpack plugin dist loader js omit 1 remove true nod

热门标签