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日

相关文章

  • 基于JavaScript实现图片剪切效果

    实现图片剪切效果是前端开发的常见需求。本攻略将介绍如何基于 JavaScript 实现简单的图片剪切效果。 步骤一:准备工作 1. 安装依赖 本示例代码需要使用 jQuery 库和 Cropper 插件,请确保在页面中引入以下两个文件: <!– 引入jQuery库 –> <script src="//cdn.bootcss.c…

    css 2023年6月9日
    00
  • 拉动滚动条加载数据的jquery代码

    要实现拉动滚动条加载数据的效果,可以使用jQuery实现。具体的实现步骤如下: 1. 监听滚动条事件 使用jQuery的scroll()函数监听滚动条事件,判断用户是否滚动到页面底部。代码如下: $(window).scroll(function() { // 判断是否滚动到页面底部 if($(document).scrollTop() >= $(do…

    css 2023年6月10日
    00
  • CSS list-style修改列表属性控制li标签样式

    下面是关于“CSS list-style修改列表属性控制li标签样式”的完整攻略。 1. 简介 在网页开发中,常常需要使用到列表。而对于列表,除了默认的样式之外,我们还可以通过CSS的list-style属性来修改它的样式。list-style属性是一个缩写属性,可以同时设置列表的样式、位置和图案类型。 具体而言,list-style属性由3个单独的属性组成…

    css 2023年6月10日
    00
  • CSS实现一个简单loading动画效果

    让我来详细讲解一下“CSS实现一个简单loading动画效果”的完整攻略。 1. 利用CSS动画实现loading效果 CSS动画提供了一种简单又流畅的方式来实现loading效果,我们可以利用CSS3的@keyframes关键字结合transform属性和animation属性来创建一个简单的loading效果。 1.1 创建loading图形 首先,我们…

    css 2023年6月10日
    00
  • 网页头部css代码优化实例

    下面我将详细讲解“网页头部CSS代码优化实例”的完整攻略。 1. 为什么要进行网页头部CSS优化 在访问一个网站时,浏览器会请求网站的代码和资源,其中的CSS文件对于页面的显示效果非常重要。大多数网站都会使用外部CSS文件来管理页面样式,因此我们需要对CSS文件进行优化,以减少页面加载时间,提高用户体验。 2. 具体优化方法 2.1 合并CSS文件 将多个C…

    css 2023年6月10日
    00
  • 使用Qt QSS绘制简单美化界面功能

    使用Qt QSS(Qt Style Sheets)可以方便的美化QT应用程序的界面。下面是使用Qt QSS绘制简单美化界面的完整攻略: 步骤1:在QT的界面设计器中,通过QSS design按钮添加样式表 首先,我们需要在QT的界面设计器中创建一个界面,并在此基础上添加样式表。为此,我们可以通过界面设计器的属性编辑器中的QSS按钮添加样式表文件。 步骤2:编…

    css 2023年6月11日
    00
  • JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)

    好嘞,下面就来详细讲解一下“JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)”的完整攻略。 首先,我们先分析一下需要实现的效果。该效果要求实现的是一个可以上下左右无缝滚动的图像效果,并且设置定高、定宽以及停顿等效果,最重要的是要兼容ie和ff两种浏览器。 为了达到这个效果,我们可以采用一些主要的方法和技巧: 1. CSS属性设置 首…

    css 2023年6月10日
    00
  • css权威指南–笔记(必看)

    首先需要明确,”CSS权威指南”是一本CSS的经典著作,详细讲解了CSS的各种属性和用法。而”CSS权威指南–笔记(必看)”则是在”CSS权威指南”的基础上,对其内容进行总结、归纳、精简,并加入了作者自己的理解和实践经验,使得读者更加易于理解和掌握CSS的基础和进阶知识。下面是”CSS权威指南–笔记(必看)”的完整攻略: 1. 如何获取”CSS权威指南-…

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