vue 项目打包时样式及背景图片路径找不到的解决方式

当使用vue-cli等脚手架搭建的Vue项目进行打包后,会出现样式文件或者背景图片无法正确加载的情况,这是因为在打包过程中,打包工具不会将样式文件和图片等静态资源的相对路径修改为绝对路径,而导致找不到文件的错误。该问题可以通过以下两种方式解决:

方法一:使用publicPath

publicPath是webpack中用来设置资源路径的一个选项,通过设置公共路径,打包后的文件会使用publicPath作为文件的根路径。

  1. 在vue.config.js文件中设置publicPath:

    js
    module.exports = {
    publicPath: './', // 或者使用 /static/
    }

  2. 将样式文件、背景图片等静态资源的相对路径修改为publicPath并重新打包。

例如,将样式文件中的相对路径:

background-image: url('./assets/images/banner.jpg');

修改为publicPath后的绝对路径:

background-image: url('/static/assets/images/banner.jpg');
  1. 打包后,会发现样式文件和图片已经正确加载。

方法二:使用file-loader

file-loader是webpack中的一个loader,可以将一个文件作为模块进行打包,并返回该文件的相对路径,从而解决相对路径问题。

  1. 安装file-loader:

    shell
    npm install file-loader -D

  2. 在vue.config.js文件中配置file-loader:

    js
    module.exports = {
    chainWebpack: config => {
    config.module
    .rule('images')
    .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
    .use('file-loader')
    .loader('file-loader')
    .options({
    name: '[name].[hash:8].[ext]',
    })
    }
    }

  3. 将样式文件中的相对路径修改为file-loader返回的相对路径:

background-image: url('~assets/images/banner.jpg');
  1. 打包后,会发现样式文件和图片已经正确加载。

以上两种方法都可以解决打包时样式及背景图片路径找不到的问题。其中方法一通过设置publicPath来解决,方法二通过使用file-loader来解决。需要根据自己项目的实际情况进行选择。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue 项目打包时样式及背景图片路径找不到的解决方式 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • 使用css实现三角符号效果

    下面是使用CSS实现三角符号效果的完整攻略: 1.使用border实现三角形 我们可以利用CSS的border属性来实现三角形。以右三角形(实例1)为例,代码如下: .triangle { width: 0; height: 0; border-top: 20px solid transparent; border-right: 20px solid red…

    css 2023年6月10日
    00
  • 欲练CSS ,必先解决IE的一些细节分析

    作为一名网站作者,想要掌握CSS,必须了解IE浏览器的一些细节分析,如何解决这些问题,才能编写兼容性更好的网页。 以下是关于解决IE细节方面问题的攻略: 了解IE的各种问题 在进行CSS编写时,IE浏览器会存在各种问题,如盒模型、浮动、定位、透明度、滤镜等问题。需要掌握IE兼容性的一些知识和解决方法,才能更好的解决这些问题。 IE6、IE7和IE8的兼容性问…

    css 2023年6月10日
    00
  • 彻底掌握CSS中的percentage百分比值使用

    为了彻底掌握 CSS 中的百分比值,我们需要先了解它们被用在哪些地方以及它们的计算方式。下面是一些常见的使用场景及解释: 在宽度和高度中使用百分比 在 CSS 中,可以使用百分比值设置元素的宽度和高度。这个值是相对于父元素的宽度和高度计算的。 .container { width: 50%; height: 100%; } 在上面的代码中,.containe…

    css 2023年6月10日
    00
  • Bootstrap3.0学习笔记之按钮与下拉菜单

    Bootstrap 3.0是一套前端框架,提供了丰富的UI组件和开发工具,可以帮助前端开发者快速搭建Web应用程序。其中,按钮和下拉菜单是Bootstrap 3.0中常用的UI组件,本文将详细介绍这两个组件的使用方法,同时提供几个示例说明。 按钮的使用 Bootstrap 3.0提供了多种样式、大小和状态的按钮,可以满足各种应用场景的需求。为了使用Boots…

    css 2023年6月11日
    00
  • CSS3制作翻转效果_动力节点Java学院整理

    CSS3翻转效果是现代web应用程序设计中常见的交互方式之一。本篇攻略将向你展示如何使用CSS3来实现吸引人的翻转效果。 步骤一:创建HTML结构 首先,在HTML中添加两个元素:一个用于显示正面,另一个用于显示反面。这两个元素需要使用相同的大小和定位。 <div class="flip-container"> <div…

    css 2023年6月10日
    00
  • 浅谈CSS中的OOCSS编程方式

    浅谈CSS中的OOCSS编程方式 什么是OOCSS? OOCSS是指基于面向对象设计的CSS编程方式,其主要思想是将CSS样式分离为可重复利用的模块(组件)。OOCSS的编程方法使用较少的CSS选择器和更多的类名,以增加代码的可重用性和可扩展性。 怎么使用OOCSS? 以下是一些使用OOCSS编程方式的建议: 1.分类样式 将CSS样式按照功能分类,这可以使…

    css 2023年6月9日
    00
  • CSS 制作波浪效果的思路

    CSS 制作波浪效果是一项常用的技巧,它可以让页面更加生动活泼。在这里,我将详细介绍 CSS 制作波浪效果的思路。 1. 了解波浪效果的基本原理 在 CSS 中制作波浪效果,我们需要了解其基本原理。波浪效果其实是通过正弦函数的周期性变化来实现的。即我们需要通过正弦函数设定一个变化周期和振幅来实现波浪的起伏效果。 2. 利用伪元素生成基本波浪形状 利用 CSS…

    css 2023年6月11日
    00
  • 可以浮动某个物体的jquery控件用法实例

    浮动某个物体的jquery控件通常称为”Sticky”,它可以让你的页面上的元素固定在页面的某个位置,用户可以在页面上进行滚动但是该元素仍然会保持在原位。这个特性在设计某些页面元素时非常有用,如导航栏或悬浮广告等。下面是使用jquery控件实现Sticky的详细过程。 步骤一:引入必要的库文件与CSS 首先,在你的HTML文件中引入必要的jquery库文件和…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部