vue-cli4 配置手记

一、css背景图打包配置publicPath

1. 配置publicPath

const isProd = ['production', 'prod'].includes(process.env.NODE_ENV);
const publicPath = isProd ? '//www/path/to/cdn : '/';
const filenameHashing = !isProd;

2. 修改url-loader配置

module.exports = {
  publicPath,
  filenameHashing,
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap((options = {}) => Object.assign(options, {
        fallback: {
          loader: 'file-loader',
          options: {
            name: filenameHashing ? 'images/[name].[hash:8].[ext]' : 'images/[name].[ext]',
            publicPath,
          }
        }
      }))
      .end()
  }
};