如何解决更新Vue CLI 5后,在Less中使用public路径下资产报错的问题

本文将详细介绍在更新Vue CLI 5后,当在Less中使用public路径下的资产时出现报错的情况,并提供了解决方法和相关参考链接。

最近,许多开发者在将Vue CLI升级至版本5后,遇到了一个问题:使用Less编写样式时,如果引用了public路径下的资产(如图片),会导致报错。

这个问题的根本原因是新的Vue CLI版本中使用的css-loader默认将"/a.png"解析为"require('/a.png')",从而导致了错误。接下来,将介绍如何解决这个问题。

解决方法:配置vue.config.js文件

要解决在Less中使用public路径下资产报错的问题,需要对vue.config.js进行一些配置。

在vue.config.js文件中添加以下代码,即可解决问题

css: {
    loaderOptions: {
      css: {
        url: {
          filter: url => url[0] !== '/'
        }
      }
    }
  }

保存vue.config.js文件,并重新启动项目。现在,在Less中使用public路径下的资产时应该不再报错了。

参考链接

https://github.com/vuejs/vue-cli/issues/7032

通过以上解决方法,应该能够解决在更新Vue CLI 5后,在Less中使用public路径下资产报错的问题。希望本文对你解决Vue CLI5问题有所帮助!文章来源地址https://www.toymoban.com/diary/vue/531.html

到此这篇关于如何解决更新Vue CLI 5后,在Less中使用public路径下资产报错的问题的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://www.toymoban.com/diary/vue/531.html

如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用
如何在Docker中设置带账户权限的MongoDB容器
上一篇 2023年11月17日 09:55
JavaScript生成随机数的方法及示例代码
下一篇 2023年11月19日 11:47

相关文章

  • 关于Vue CLI项目 运行发生了 less-lorder错误的解决方案

    问题: 在运行vue项目的时候发生: Module not found: Error: Can\\\'t resolve \\\'less-loader\\\' 错误导致项目无法执行 如果你想要使用 less-loader 来处理 Less 样式文件,可以按照以下步骤进行安装和配置: 两步: 通过npm 或者 yarn 进行对 less-loader 然后再配置文件中进行配置 前提条件得安装 web

    2024年02月11日
    浏览(63)
  • 在vite+vue3项目中配置使用css预处理器(less/sass)以及路径别名

    vite已经将这些预处理器的loader内置了,我们不用再像在webpack项目中那样,需要下载和配置一堆相关的loader,我们只需要下载less,sass依赖,就能直接在项目中使用啦 使用npm或者yarn来安装以下依赖: Less预处理器: npm install -D less Sass预处理器: npm install -D sass 如图,下载之后

    2024年02月11日
    浏览(104)
  • less中:export 无效问题,vue-cli中导出公共变量,js对象为空对象

    试例 解决方案 注:在vue-cli v5版本中requireModuleExtension是已经被移除了。在没有任何配置的情况下打印出来的就是一个空对象 通过阅读官方文档,发现可以根据约定将文件名改为.module.(css|scss|sass|less|styl(us)?)结尾,这样就可以识别出css module。 这里是将自己项目中的variables.le

    2024年02月13日
    浏览(77)
  • 如何把数据变成资产,企业数据资产化实施路径解析

    1月11日,财政部发布《关于加强数据资产管理的指导意见》,就依法合规管理数据资产、加强数据资产使用管理、稳妥推动数据资产开发利用等作出规定。同一天,湖南省完成首笔数据资产无抵押融资,某科技公司获得银行500万元授信额度。数据资产这一新兴资产类型,在经

    2024年02月21日
    浏览(61)
  • 如何使用Vue CLI进行预渲染

    在Vue CLI中使用预渲染,你可以借助插件vue-cli-plugin-prerender-spa来实现。以下是使用Vue CLI进行预渲染的步骤: 1:安装Vue CLI:首先安装Vue CLI。如果没有安装,可以通过以下命令进行全局安装: 2:创建Vue项目:使用Vue CLI创建一个新的Vue项目,进入项目目录: 3:添加预渲染插件

    2024年02月08日
    浏览(47)
  • 使用vscode在vue项目中重命名文件选择了更新导入路径仍有部分导入路径没有更新

    背景: 将一个js文件重命名,vscode弹出是否更新导入路径,选择更新导入后,发现js文件中导入路径都自动更新,vue文件中路径都没有更新。 解决方案: 在设置中搜索updateimport,将最下面的VueUpdate Imports On File Move: Enable 将其勾选,就可以实现vue文件的重命名更新导入。经过实

    2024年02月12日
    浏览(53)
  • 如何解决npm install 的报错npm ERR! network request to http://registry.cnpmjs.org/vue-cli failed

    报错: 解决方法: npm ERR! network request to http://registry.cnpmjs.org/vue-cli failed, reason: getaddrinfo ENOTFOUND 这句话已经很明显的提示 http://registry.cnpmjs.org/vue-cli 请求失败了,但网上其他博客还是让代理这个路径。试了网上很多方法都没有用。最后执行了以下语句,执行成功 直接代理淘

    2024年02月04日
    浏览(88)
  • x-cmd pkg | public-ip-cli - 公共 IP 地址查询工具

    public-ip-cli 是一个用 Javascript 编写的命令行工具,用于获取当前计算机或网络所使用的公共 IP 地址。 它可以让用户在命令行界面上查询 OpenDNS、Google DNS 和 HTTPS 服务的 DNS 记录以获取与互联网通信时所分配的公共 IP 地址。 使用 x env use public-ip-cli 即可自动下载并使用 在终端运

    2024年01月17日
    浏览(67)
  • 报错 “Required request body is missing: public“ 的解决方案以及注意点(Vue, axios拦截器)

    在使用axios拦截器时,返回500,报了\\\"Required request body is missing: public\\\"的错误,我的拦截器是这么写的,参考了以下链接: http://www.45fan.com/article.php?aid=1D2dBLoGSZ31XuGv#_label1 我这里的基础地址在我本地换成了接口的域名地址。 然后在api/index.js的文件里面,这样应用的:  然后报错

    2024年02月10日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包