vue webpack打包后图片路径问题

原因分析

• 一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的
• 但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径

1. 资源路径的引用问题

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

2. CSS背景图片的引用问题

• url(../../static/img/logo-index.2f00bf2.png) no-repeat

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