vue img图片路径和背景图片路径打包问题

当项目需要放到服务器子目录时候,会遇到这个图片打包问题,
处理方法有两个:#A和#B

#A 给所有资源配置相对路径'/'.
A-1,找到 config->index.js里面，如下修改

    //举个栗子,当前服务器路径/访问路径是 127.0.0.1/wap/other/index.html
    //打包资源路径都用相对路径'/' ,这样就可以解决了.
    index: path.resolve(__dirname, '../wap/other/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../wap/other'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/wap/other/',

A-1的作用如下:

image.png

#B 给所有资源对应配置路径'../../'和'./',
B-1,找到 config->index.js里面，如下修改

    //这里让页面上打包成的css/js和img标签src的路径都带上  ./  ,但会影响到css背景图路径,所以需要第二步配置
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

B-2,找到 build->utils.js里面，如下修改

    if (options.extract) {
      return ExtractTextPlugin.extract({
        publicPath: '../../',   //增加这一句.作用于css背景图background
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

B-1和B-2的作用如下:

image.png

至此,ok了么?

再补充了个注意点
不要用给webpack.base.conf.js添加publicPath: '../../'的方法,因为会同时作用于img和css路径,从而出现问题

      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          // publicPath: '../../',   //这里不能加,不然会导致img和背景图background都引入前缀,从而img路径失效
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

--by Affandi ⊙▽⊙