vue2 项目架构--vue.config.js（七）

vue.config.js

const path = require('path');
const webpack = require('webpack');
const CompressionPlugin = require('compression-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  
  // 输出文件目录
  outputDir: 'dist',
  
  // 静态资源目录
  assetsDir: 'assets',
  
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  
  // 服务器配置
  devServer: {
    port: 8080,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  
  // webpack 配置
  configureWebpack: config => {
    const plugins = [
      // 生产环境启用 gzip 压缩
      new CompressionPlugin({
        test: /\.(js|css|svg|woff|ttf|json|html)$/,
        threshold: 10240
      }),
      // 清理输出目录
      new CleanWebpackPlugin(),
      // 注入环境变量
      new webpack.DefinePlugin({
        'process.env.VUE_APP_VERSION': JSON.stringify(require('./package.json').version)
      })
    ];
    
    // 生产环境添加额外插件
    if (process.env.NODE_ENV === 'production') {
      config.plugins = [...config.plugins, ...plugins];
    }
  },
  
  // 链式操作 webpack 配置
  chainWebpack: config => {
    // 配置别名
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
      .set('@api', path.resolve(__dirname, 'src/api'))
      .set('@assets', path.resolve(__dirname, 'src/assets'))
      .set('@components', path.resolve(__dirname, 'src/components'))
      .set('@views', path.resolve(__dirname, 'src/views'));
      
    // 优化图片加载
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options.limit = 10240;
        options.fallback = {
          loader: 'file-loader',
          options: {
            outputPath: 'assets/images'
          }
        };
        return options;
      });
      
    // 移除 prefetch 插件
    config.plugins.delete('prefetch');
  },
  
  // CSS 相关配置
  css: {
    // 是否使用 css 分离插件 ExtractTextPlugin
    extract: process.env.NODE_ENV === 'production',
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/variables.scss";`
      }
    },
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  
  // 插件配置
  pluginOptions: {
    // 可以在这里配置第三方插件
  }
};