configureWebpack和chainWebpack的配置方式

对象写法

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir)
}

function getPlugins() {
  let plugins = []
  if (process.env.VUE_APP_ENV === 'test') {
    plugins.push(
      // 添加插件
    )
  }
  if (process.env.VUE_APP_ENV === 'production') {
    plugins.push(
      // 添加插件
    )
  }
  return plugins
}

module.exports = {
  publicPath: "/",
  lintOnSave: false,
  devServer: {
    // 配置服务器
    port: 8086,
    open: true,
  },
  configureWebpack: {
    // 覆盖webpack默认配置的都在这里
    resolve: {
      // 配置解析别名其中:@代表根目录，@c代表 src/components 文件夹，等
      alias: {
        "@": path.resolve(__dirname, "./src"),
        "api": path.resolve(__dirname, "./src/api"),
      }
    }
    plugins: getPlugins()
  },
};

函数式写法

// vue.config.js

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir)
}
function getPlugins() {
  let plugins = []
  if (process.env.VUE_APP_ENV === 'test') {
    plugins.push(
      // 添加插件
    )
  }
  if (process.env.VUE_APP_ENV === 'production') {
    plugins.push(
      // 添加插件
    )
  }
  return plugins
}

module.exports = {
  publicPath: "/",
  lintOnSave: false,
  devServer: {
    // 配置服务器
    port: 8086,
    open: true,
  },
  configureWebpack: (config) => {

    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production'
    } else {
      // 为开发环境修改配置...
      config.mode = 'development'
    }

    // 方式1：
    // Object.assign(config, {
    //   resolve: {
    //     alias: {
    //       '@': path.resolve(__dirname, './src'),
    //       '@a': path.resolve(__dirname, './src/assets'),
    //       '@c': path.resolve(__dirname, './src/components'),
    //     }
    //   }
    //   plugins: getPlugins()
    // })

    // 方式2：
    const name = '111'
    const resolve = {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@a': path.resolve(__dirname, './src/assets'),
        '@c': path.resolve(__dirname, './src/components'),
      }
    }
    const plugins = getPlugins()
    return { name, resolve, plugins }
  }
};