vue.config.js配置参考（2024-05-20）

// vue.config.js
module.exports = {
  // 选项...
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  outputDir: 'dist',
  assetsDir: 'assets',
  indexPath: 'index.html',
  filenameHashing: true,
  pages: {
    index: {
      entry: 'src/index/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Index Page',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 可以在这里添加更多页面配置
  },
  lintOnSave: process.env.NODE_ENV !== 'production',
  runtimeCompiler: false,
  transpileDependencies: [],
  productionSourceMap: false,
  // 配置webpack-bundle-analyzer插件
  configureWebpack: process.env.NODE_ENV === 'production'
    ? {
        plugins: [
          new BundleAnalyzerPlugin({
            generateStatsFile: true, // 是否生成stats.json文件
            statsOptions: {
              source: false // 不包含源代码内容
            }
          })
        ]
      }
    : {},
  // 配置chainWebpack自定义规则
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add(/some-third-party-library/) // 添加需要处理的第三方库目录
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          // 修改babel-loader选项
          return options;
        });
  },
  // 配置devServer
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // string | Object
    before: app => {}
  },
  // 其他配置...
};

这个示例展示了如何在vue.config.js中配置Vue CLI项目的一些常用选项，包括基本的打包输出配置、页面配置、源码检查、webpack配置调整以及开发服务器设置。同时，它也演示了如何在生产环境中使用BundleAnalyzerPlugin插件分析打包后的文件分布。