掌握Vue CLI 3脚手架配置（vue.config.js）

// vue.config.js
module.exports = {
  // 选项...
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  // 输出文件目录
  outputDir: 'dist',
  // 静态资源目录 (js, css, img, fonts)
  assetsDir: 'assets',
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // CSS 相关选项
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false
  },
  // devServer 代理设置
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    open: true,
    proxy: {
      // 配置跨域处理 可以设置你想要代理的接口
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  // 插件选项
  pluginOptions: {
    // ...
  },
  // configureWebpack 或 chainWebpack 调整内部webpack配置
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  },
  chainWebpack: config => {
    config.plugin('html')
      .tap(args => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
        } else {
          // 为开发环境修改配置...
        }
        return args;
      });
  }
};

这个示例展示了如何在vue.config.js中配置Vue CLI 3项目的基本设置，包括基本路径、输出目录、静态资源目录、是否生成source map文件、开发服务器设置、跨域代理配置以及自定义webpack配置。根据项目需求，可以适当调整配置。