自定义 pages 后或其他情况下，CSS 中的相对路径替换不正确

[cklwblove]

解决方案如下：

const styles = [
  'css',
  'postcss',
  'scss',
  'sass',
  'less',
  'stylus'
]

const modules = [
  'vue-modules',
  'vue',
  'normal-modules',
  'normal'
]

module.exports = {
  // ...
  chainWebpack: config => {
    // ...
    if (shouldExtract) {
      styles.forEach(s => {
        modules.forEach(m =>
          config
            .module
            .rule(s)
            .oneOf(m)
            .use('extract-css-loader')
            .tap(options => {
              options.publicPath = '' // Set whatever you want as publicPath
              return options
            })
        )
      })
    }
  }
  // ...
};

或者 封装个通用的方法

const formatAssetsExtractCSSLoader = (config) => {
  const styles = [
    'css',
    'postcss',
    'scss',
    'sass',
    'less',
    'stylus'
  ]

  const modules = [
    'vue-modules',
    'vue',
    'normal-modules',
    'normal'
  ]

  if (shouldExtract()) {
    styles.forEach(s => {
      modules.forEach(m =>
        config
          .module
          .rule(s)
          .oneOf(m)
          .use('extract-css-loader')
          .tap(options => {
            options.publicPath = '../../../' // Set whatever you want as publicPath
            return options
          })
      )
    })
  }
}

module.exports = {
  // ...
  chainWebpack: config => {
    // ...
     formatAssetsExtractCSSLoader(config);
    }
  }
  // ...
};