<code>vue.config.js是 Vue CLI 3 及以上版本项目中的配置文件，用于配置 Vue.js 应用的各种构建设置。

const path = require('path');

//resolve这是一个辅助函数，用于生成绝对路径。将相对路径转换为绝对路径

function resolve(dir) {

return path.join(__dirname, dir);

}

module.exports = {

  // 项目部署的基础路径

  // 默认情况下，我们假设你的应用将被部署在域的根目录下

  // 比如 https://www.my-app.com/

  // 如果应用被部署在一个子路径上，你需要在这里指定子路径

  // 比如 https://www.foobar.com/my-app/

  // 需要配置为 '/my-app/'

  publicPath: '/',

  // 将构建好的文件输出到哪里

  outputDir: 'dist',

  // 放置静态资源的地方 (js/css/img/font/...)

  assetsDir: 'assets',

  // 指定生成的 index.html 的输出路径 (相对于 outputDir)

  // 可以是相对路径也可以是绝对路径

  indexPath: 'index.html',

  // 默认在生成的静态资源文件名中包含 hash 以便更好的控制缓存

  filenameHashing: true,

  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建

  productionSourceMap: true,

  //兼容ie, transpileDependencies, 需要以兼容模式打包的依赖名称或文件夹，文件等

  transpileDependencies: [],

  // 在开发环境下通过 eslint-loader 在每次保存时 lint 代码

  // 这个值会在 @vue/cli-plugin-eslint 被安装之后生效

  lintOnSave: process.env.NODE_ENV !== 'production',

  // 是否使用包含运行时编译器的 Vue 构建版本

  runtimeCompiler: false,

  // webpack 配置

  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md

  configureWebpack: {

    // 在这里可以进行webpack配置

    // 该对象将被 webpack-merge 合并入最终的 webpack 配置

output: {

// 定义导出的库名称

library: 'MyLibraryName',

// 定义库的目标格式

// 'var': 作为变量导出。

// 'umd': 通用模块定义，适用于 AMD、CommonJS 和浏览器全局变量。

// 'commonjs2': 适用于 CommonJS 环境。

// 'window': 作为 window 对象的属性导出。

//'global': 作为 global 对象的属性导出（Node.js）。

//'jsonp': 作为 JSONP 回调函数的名称。

libraryTarget: 'umd',

// JsonpFunction 是 Webpack 用于 JSONP 回调函数的名称，避免与其他 Webpack 实例冲突

jsonpFunction: `webpackJsonp_MyLibraryName`

}

  },

  // webpack 链式操作

  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md

  chainWebpack: config => {

    // 这里可以进行链式操作的webpack配置

// 1. 移除默认的 svg 处理规则中的 src/icons 目录

config.module

.rule('svg')

.exclude.add(resolve('src/icons'))

.end();

// 2. 添加一个新的名为 icons 的规则，用于处理 src/icons 目录下的 svg 文件

config.module

.rule('icons')

.test(/\.svg$/)

.include.add(resolve('src/icons'))

.end()

.use('svg-sprite-loader')

.loader('svg-sprite-loader')

.options({ symbolId: 'icon-[name]' })

.end();

// 使用 DefinePlugin 插件定义环境变量

config.plugin('define').tap(args => {

let obj = args[0]['process.env'];

obj.VUE_APP_BUILD_TIME = JSON.stringify(new Date().toLocaleString());

return args;

});

//配置gzip压缩

    const CompressionWebpackplugin = require('compression-webpack-plugin')

if (process.env.NODE_ENV === 'production') {

config.plugin('CompressionWebpackplugin').use(

new CompressionWebpackplugin({

test: /.(js|css)$/, // 要压缩的文件格式

filename: '[path].gz[query]', // 压缩后文件名保持原名加.gz

threshold: 10240, // 超过10kb就压缩

minRatio: 0.8 //压缩率小于0.8才会压缩

})

）

}

  },

  // 配置 css 相关

  css: {

    // 是否使用 css 分离插件 ExtractTextPlugin

    extract: true,

    // 是否开启 CSS source map？

    sourceMap: false,

    // css预设器配置项

    loaderOptions: {

      css: {},

      postcss: {}

    },

    // 启用 CSS modules for all css / pre-processor files.

    requireModuleExtension: true

  },

  // webpack-dev-server 相关配置

  devServer: {

    // 设置端口

    port: 8080,

// 设置主机名

    host: '0.0.0.0',

// 是否启用 HTTPS

    https: false,

// 是否在浏览器中自动打开

    open: true,

// 启用 gzip 压缩

compress: true,

// 配置代理，解决跨域问题

    proxy: {

      '/api': {

        target: 'http://localhost:3000', // 代理目标地址

        changeOrigin: true, // 是否改变请求源

        pathRewrite: {

// 重写路径

          '^/api': ''

        }

      }

    }

  },

  // 第三方插件配置

  pluginOptions: {

    // ...

  }

}

config.module.rule('svg').exclude.add(resolve('src/icons')).end():

这是链式调用，用于修改默认的 svg 处理规则。config.module.rule('svg')：获取名为 svg 的处理规则。.exclude.add(resolve('src/icons'))：从默认的 svg 处理规则中排除 src/icons 目录。这意味着 src/icons 目录下的 SVG 文件将不会被默认的 SVG 处理规则处理。.end()：结束当前链式调用。

config.module.rule('icons').test(/.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({ symbolId: 'icon-[name]' }).end():

config.module.rule('icons')：添加一个新的名为 icons 的处理规则。.test(/\.svg$/)：指定该规则适用于所有以 .svg 结尾的文件。.include.add(resolve('src/icons'))：只包含 src/icons 目录中的 SVG 文件。.use('svg-sprite-loader')：使用 svg-sprite-loader 来处理这些 SVG 文件。.loader('svg-sprite-loader')：指定使用的加载器。.options({ symbolId: 'icon-[name]' })：为 svg-sprite-loader 提供选项。symbolId: 'icon-[name]' 指定生成的 symbol 的 id 格式，其中 [name] 是原始文件名。.end()：结束当前链式调用。

svg-sprite-loader

该加载器将多个 SVG 文件合并为一个 SVG 精灵图，并为每个 SVG 文件生成一个 <symbol> 元素。通过 symbolId: 'icon-[name]'，每个 <symbol> 元素的 id 属性将设置为 icon- 加上原始文件名。这使得在 HTML 文件中可以通过 <use xlink:href="#icon-[name]">code> 来引用这些图标。将所有 SVG 图标集中在 src/icons 目录下，并通过 svg-sprite-loader 处理，生成一个 SVG 精灵图，有助于优化图标的管理和使用。避免了多个 HTTP 请求，提高了加载性能。

// 使用 DefinePlugin 插件定义环境变量

config.plugin('define').tap(args => { let obj = args[0]['process.env']; obj.VUE_APP_BUILD_TIME = JSON.stringify(new Date().toLocaleString()); return args; });