针对vue打包css文件中背景图片的路径问题，我为您提供以下完整攻略：
背景
在使用vue开发时，有时我们需要在CSS样式中使用背景图片，而在Webpack打包后，背景图片的路径不正确，导致页面无法正确显示背景图片。
解决方法
我们可以通过配置Webpack的url-loader和file-loader来解决这个问题。
1. 安装依赖
首先需要安装以下依赖：
npm install url-loader file-loader --save-dev
2. 配置webpack.config.js
在webpack.config.js中添加如下代码：
module.exports = {
module: {
rules: [
// 处理css中的背景图片
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
}
},
// 处理字体文件中的背景图片
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader',
options: {
name: '[name].[hash:7].[ext]'
}
}
]
}
}
注：limit的值为10000表示小于10kb的图片会被转换为base64编码，大于10kb的图片则以文件形式存储。name选项表示输出路径和文件名。
3. 修改css中的图片路径
在css中的图片路径前加上~表示是从根目录下查找，例如：
div {
background-image: url('~@/assets/img/bg.png');
}
其中，@表示项目根目录，~表示从根目录下查找，/assets表示静态资源路径。
4. 在vue组件中使用图片路径
在vue组件中引用css样式时，需要使用全局样式并加上scoped属性，例如：
<template>
<div class="bg"></div>
</template>
<style lang="scss" scoped>
@import 'index.scss';
.bg {
background-image: url('~@/assets/img/bg.png');
}
</style>
其中，scss样式中的引用路径同样需要加上~。
示例说明
例如，在vue项目中，我们需要使用bg.png作为背景图片，在代码中如下引用：
<template>
<div class="bg"></div>
</template>
<style lang="scss" scoped>
@import 'index.scss';
.bg {
background-image: url('~@/assets/img/bg.png');
}
</style>
在打包后，bg.png图片会被转换为img/bg.hash.js文件，在项目dist目录下的路径为./img/bg.hash.js。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！