vue.config.js详细配置

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]"> 来引用这些图标。
• 将所有 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; });

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

  • config.plugin('define')：获取 DefinePlugin 插件的配置。
  • .tap(args => {...})：修改 DefinePlugin 插件的配置。tap 方法接收一个函数，该函数的参数 args 是插件的现有配置。

• let obj = args[0]['process.env']:

  • args[0]['process.env'] 是 DefinePlugin 插件当前的环境变量配置对象。
  • obj 变量指向这个对象，可以在该对象上添加新的环境变量。

• obj.VUE_APP_BUILD_TIME = JSON.stringify(new Date().toLocaleString()):

  • 添加一个新的环境变量 VUE_APP_BUILD_TIME，其值为当前的构建时间。
  • new Date().toLocaleString() 获取当前日期和时间，并转换为本地化的字符串格式。
  • JSON.stringify 将日期字符串转换为 JSON 格式的字符串，确保它在生成的代码中被正确处理。

• return args:

  • 修改后的 args 数组需要返回，以应用新的配置。