vue-cil5项目中配置打包优化vue.config.js完整版

在Vue CLI 5项目中，`vue.config.js`文件是用于自定义构建配置的地方。以下是一个包含基础打包优化设置的`vue.config.js`文件示例：

module.exports = {
  // 基本配置
  publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : '/', // 生产环境下的资源路径
  outputDir: 'dist', // 输出目录

  // 配置生产环境插件
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 使用UglifyJsPlugin压缩代码
      const uglifyJsPlugin = require('uglifyjs-webpack-plugin');
      config.optimization.minimize = true;
      config.plugins.push(new uglifyJsPlugin({
        sourceMap: true,
        parallel: true,
        cache: true,
        compressor: { warnings: false },
      }));
      
      // 删除不必要的模块
      config.module.rules.delete('extract-text-webpack-plugin'); // 如果有使用ExtractTextPlugin，则移除
      config.optimization.runtimeChunk = 'single'; // 将runtime单独提取到一个chunk，加快首屏加载速度
    }
  },

  // 提升性能的选项
  runtimeCompiler: true, // 在浏览器中动态编译Vue实例
  productionSourceMap: !process.env.CI, // 生产环境提供source map以便调试

  // 构建时的提示信息
  devServer: {
    open: process.platform === 'darwin', // 自动打开浏览器
    host: '0.0.0.0',
    disableHostCheck: true,
  },
};

//