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来解决。需要根据自己项目的实际情况进行选择。