Vue2 vue.config.js 配置完全教程

module.exports = {
  // 基本路径
  publicPath: '/',
  
  // 输出文件目录
  outputDir: 'dist',
  
  // 静态资源目录
  assetsDir: 'static',
  
  // 生产环境是否生成 sourceMap
  productionSourceMap: false,
  
  // 开发服务器配置
  devServer: {
    port: 8080,
    host: '0.0.0.0',
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

const path = require('path');

module.exports = {
  // 配置路径别名
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        'components': path.resolve(__dirname, 'src/components'),
        'assets': path.resolve(__dirname, 'src/assets'),
        'views': path.resolve(__dirname, 'src/views'),
        'api': path.resolve(__dirname, 'src/api')
      }
    }
  },
  
  // 修改 webpack 配置
  chainWebpack: config => {
    // 添加新的 loader
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options.limit = 10240;
        return options;
      });
  }
}

module.exports = {
  // 生产环境构建配置
  productionSourceMap: false,
  
  // 开启 gzip 压缩
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  },
  
  // 配置 externals
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios'
    }
  },
  
  // 配置 splitChunks
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        minSize: 20000,
        maxSize: 0,
        minChunks: 1,
        maxAsyncRequests: 30,
        maxInitialRequests: 30,
        automaticNameDelimiter: '~',
        cacheGroups: {
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            chunks: 'initial'
          },
          common: {
            name: 'chunk-common',
            minChunks: 2,
            priority: -20,
            chunks: 'initial',
            reuseExistingChunk: true
          }
        }
      }
    }
  }
}

const path = require('path');

module.exports = {
  // 多页面配置
  pages: {
    index: {
      // 入口文件
      entry: 'src/pages/index/main.js',
      // 模板文件
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html',
      // 页面标题
      title: '首页',
      // 在这个页面中包含的块
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    admin: {
      entry: 'src/pages/admin/main.js',
      template: 'public/admin.html',
      filename: 'admin.html',
      title: '管理后台',
      chunks: ['chunk-vendors', 'chunk-common', 'admin']
    }
  }
}

const webpack = require('webpack');

module.exports = {
  // 配置插件
  configureWebpack: {
    plugins: [
      // 定义全局变量
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
          VUE_APP_API_URL: JSON.stringify(process.env.VUE_APP_API_URL)
        }
      }),
      
      // 自动加载模块
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      }),
      
      // 生成 HTML 文件
      new HtmlWebpackPlugin({
        template: 'public/index.html',
        filename: 'index.html',
        chunks: ['chunk-vendors', 'chunk-common', 'index']
      })
    ]
  }
}

// 自定义插件
class MyPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
      // 在生成资源到 output 目录之前
      console.log('MyPlugin is running');
      callback();
    });
  }
}

module.exports = {
  // 配置自定义插件
  configureWebpack: {
    plugins: [
      new MyPlugin()
    ]
  },
  
  // 配置 webpack-chain
  chainWebpack: config => {
    // 添加自定义 loader
    config.module
      .rule('my-loader')
      .test(/\.my$/)
      .use('my-loader')
      .loader('my-loader')
      .options({
        // loader 选项
      });
      
    // 修改已有 loader 配置
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        // 修改选项
        return options;
      });
  }
}

// .env.development
NODE_ENV=development
VUE_APP_API_URL=http://localhost:3000
VUE_APP_TITLE=开发环境

// .env.production
NODE_ENV=production
VUE_APP_API_URL=https://api.example.com
VUE_APP_TITLE=生产环境

// vue.config.js
module.exports = {
  // 配置环境变量
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
          VUE_APP_API_URL: JSON.stringify(process.env.VUE_APP_API_URL),
          VUE_APP_TITLE: JSON.stringify(process.env.VUE_APP_TITLE)
        }
      })
    ]
  }
}

// vue.config.js
module.exports = {
  // 根据环境变量配置不同的选项
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  
  // 配置不同环境的构建选项
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 生产环境配置
      config.optimization.minimize = true;
      config.optimization.splitChunks.chunks = 'all';
    } else {
      // 开发环境配置
      config.devtool = 'source-map';
    }
  },
  
  // 配置不同环境的开发服务器
  devServer: {
    port: process.env.NODE_ENV === 'production' ? 8080 : 3000,
    proxy: process.env.NODE_ENV === 'production' ? {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true
      }
    } : {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}