Vue CLI 4.x 中 vue.config.js配置服务，输出和打包

在 Vue CLI 4.x 中，可以通过 `vue.config.js` 配置文件来配置开发服务、输出和打包等相关配置。

以下是一些常见的配置项：

### 开发服务配置

module.exports = {
  devServer: {
    port: 8080, // 端口号
    open: true, // 自动打开浏览器
    hot: true, // 开启热更新
    proxy: { // 配置代理
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

### 输出配置

module.exports = {
  outputDir: 'dist', // 输出目录
  assetsDir: 'static', // 静态资源目录
  publicPath: '/', // 部署应用包时的基本 URL
  indexPath: 'index.html', // 指定生成的 index.html 的输出路径
  filenameHashing: true, // 文件名哈希值
  productionSourceMap: false, // 生产环境下是否生成 source map
}

### 打包配置

module.exports = {
  configureWebpack: {
    // 配置 webpack
    plugins: [
      new MyPlugin()
    ]
  },
  chainWebpack: config => {
    // 配置 webpack 链式操作
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options =>
        Object.assign(options, {
          limit: 5120, // 图片大小限制
        })
      )
  }
}

更多配置项可以参考官方文档：[https://cli.vuejs.org/zh/config/#vue-config-js](https://cli.vuejs.org/zh/config/#vue-config-js)。