如何解决vue打包项目中的图片,静态css,js 不能访问路径问题

1.在书写代码的时候按照相对路径引入；

1. 但是webpack+vue-cli 默认打包的css,js 等资源的路径是绝对的；

实际写的代码

<template>
  <div>
    <div class="logo"></div>
    <img src="../assets/images/logo.png" alt="">
  </div>
</template>

<script>
export default {
  
}
</script>
<style scoped>
  .logo {
    width: 200px;
    height: 200px;
    background: url(../assets/images/logo.png) center center;
  }
</style>

3.webpack 打包编译后的路径是这样的；打包编译之后的路径是绝对路径；当部署到带有文件夹的项目中就会报错，因为把配置的static 文件当成了根路径；
解决办法： 引入相对路径；
打开build/webpack.prod.conf.js

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
    publicPath: './'
  },

4.执行打包命令，发现解决了css,js img图片的路径问题，但是没有解决背景图片的路径问题，下面我们解决背景图片的问题
修改build/utils.js

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

再次执行打包命令，发现完美解决问题；
职场小白south Joe，望各位大神批评指正，祝大家学习愉快！