Vue 2 vs Vue 3：深入对比 vue.config.js 配置差异与迁移指南

目前 Vue 版本已发布至 Vue 3.x，而 Vue 2.x 和 Vue 3.x 在项目配置和开发方式上有些差异。在 Vue 3 中，vue.config.js 的配置文件结构和 Vue 2 是相似的，以下是一个适用于 Vue 3 的完整配置文件示例，兼顾开发环境、生产环境优化以及常用功能配置。

适用于 Vue 3 的 vue.config.js 配置文件示例：

const path = require('path');
const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
  // 基础路径，适用于部署到子路径的情况
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',

  // 构建输出目录
  outputDir: 'dist',

  // 静态资源目录
  assetsDir: 'assets',

  // 生成的 index.html 输出路径
  indexPath: 'index.html',

  // 是否启用 eslint 检查
  lintOnSave: process.env.NODE_ENV !== 'production',

  // 是否生成 .map 源代码映射文件（防止源码泄露）
  productionSourceMap: false,

  // CSS 相关配置
  css: {
    // 是否启用 CSS 分离
    extract: process.env.NODE_ENV === 'production',
    
    // 开启 CSS Source Map
    sourceMap: false,

    // 预处理器全局变量
    loaderOptions: {
      scss: {
        additionalData: `@import "@/styles/global.scss";`
      }
    }
  },

  // Webpack 配置（简单修改）
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    plugins: [
     // 仅在生产环境启用 Gzip 压缩
      new CompressionWebpackPlugin({
        algorithm: 'gzip', // 使用 gzip 压缩算法
        test: /\.(js|css|html|svg)$/, // 对这些文件类型进行压缩
        threshold: 10240, // 只有大小大于此值的文件才会被压缩，单位：字节
        minRatio: 0.8, // 只有压缩率小于这个值的文件才会被压缩
        deleteOriginalAssets: false, // 不删除源文件
      })
    ]
  },

  // Webpack 配置（细粒度控制）
  chainWebpack: config => {
    // 设置图片转 base64 限制
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, { limit: 10240 }));
  },

  // 开发服务器配置
  devServer: {
    port: 8080, // 端口号
    host: 'localhost', // 本地访问