1. 使用Webpack配置别名

步骤：

  1. 打开项目的vue.config.js文件。
  2. 添加一个别名配置，例如：
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@assets': '@/assets'
      }
    }
  }
}
  1. 在CSS中使用别名：
background-image: url(~@assets/images/logo.png);

这样，无论你的assets文件夹位于项目的哪个位置，都可以通过@assets来引用，简化了路径的书写。

2. 设置正确的publicPath

步骤：

  1. 在vue.config.js中设置publicPath：
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/production-subpath/' : '/'
}
  1. 确保CSS中的图片路径相对于publicPath：
background-image: url('/production-subpath/images/logo.png');

3. 使用require引入图片

步骤：

  1. 在组件的<script>部分：
export default {
  data() {
    return {
      logo: require('@/assets/images/logo.png')
    }
  }
}
  1. 在模板中引用：
<img :src="logo" alt="Logo">

4. 使用url()函数处理背景图片

示例：

background-image: url(../images/logo.png);

5. 利用CSS Modules避免全局污染

如果你不想你的样式影响到其他组件，可以使用CSS Modules。

步骤：

  1. 在组件的<style>标签中使用module属性：
<style module>
.logo {
  background-image: url(../images/logo.png);
}
</style>
  1. 在模板中使用：
<div class="logo"></div>

CSS Modules确保样式是局部的，不会污染全局样式。

总结