vue cli3 关于 vue.config.js 的常用配置

module.exports = {
  filenameHashing: false,
  assetsDir: 'static/',
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'vue-router': 'VueRouter',
      'axios': 'axios'
    },
    devServer: {
      disableHostCheck: true,
      port: '9001',
      open: 'http://localhost:9001/#login',
      proxy: {
        '/': {
          target: 'http://api.domain.com:9000/',
          changeOrigin: true
        }
      }
    }
  },
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.output.filename('static/js/[name].js?t=[hash:8]').end()
      config.output.chunkFilename('static/js/[name].js?t=[hash:8]').end()
      config.plugin('extract-css').tap(args => [{
        filename: 'static/css/[name].css?t=[hash:8]',
        chunkFilename: 'static/css/[name].css?t=[hash:8]'
      }])
    }
  }
}

module.exports = {
  css: {
    extract: {
      filename: 'css/[name].css?hash=[hash:8]',
      chunkFilename: 'css/[name].css?hash=[hash:8]'
    }
  },
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options.fallback.options.name = 'img/[name].[ext]?hash=[hash:8]'
        return options
      })
  },
  configureWebpack: {
    output: {
      filename: 'js/[name].js?hash=[hash:8]',
      chunkFilename: 'js/[name].js?hash=[hash:8]'
    },
    externals: {
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'vue-router': 'VueRouter',
      'axios': 'axios'
    },
    devServer: {
      disableHostCheck: true,
      port: '9001',
      open: 'http://localhost:9000/',
      proxy: {
        '/': {
          target: 'https://api.domain.com',
          changeOrigin: true
        }
      }
    }
  }
}

module.exports = {
  css: {
    extract: {
      filename: 'static/css/[name].css?hash=[contenthash:8]',
      chunkFilename: 'static/css/[name].css?hash=[contenthash:8]'
    }
  },
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options.fallback.options.name = 'static/img/[name].[ext]?hash=[contenthash:8]'
        return options
      })
  },
  configureWebpack: {
    output: {
      filename: 'static/js/[name].js?hash=[chunkhash:8]',
      chunkFilename: 'static/js/[name].js?hash=[chunkhash:8]'
    },
    externals: {
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'vue-router': 'VueRouter',
      'axios': 'axios'
    },
    devServer: {
      disableHostCheck: true,
      port: '9001',
      open: 'http://localhost:9000/',
      proxy: {
        '/': {
          target: 'https://api.domain.com',
          changeOrigin: true
        }
      }
    }
  }
}