vue.config.js详情配置

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

const CompressionPlugin = require('compression-webpack-plugin')
 
const name = process.env.VUE_APP_TITLE || 'xxxxxx系统' // 网页标题
 
const port = process.env.port || process.env.npm_config_port || 80 // 端口

const cdn = {
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios',
  },
  // cdn的css链接
  css: [],
  // cdn的js链接
  js: [
    'https://cdn.bootcss.com/vue/2.6.11/vue.min.js',
    'https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js',
    'https://cdn.bootcss.com/axios/0.27.2/axios.min.js',
    'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.min.js',
  ],
}


module.exports = {
  // <-------------------  基础配置  -------------------->
  //生产环境是否要生成 sourceMap
  productionSourceMap: false,
  //部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致*
  //可以通过三元运算去配置dev和prod环境,
  //publicPath: process.env.NODE_ENV === 'production' ? '/prod/' : './'
  publicPath: './',
  //build 时输出的文件目录
  outputDir: 'dist',
  // 放置静态文件夹目录
  assetsDir: 'assets',
  // 是否开启eslint保存检测，有效值：ture | false | 'error'
  lintOnSave: process.env.NODE_ENV === 'development',
  // dev环境下，webpack-dev-server 相关配置
  devServer: {
    // 开发运行时的端口
    port: 8090,
    // 开发运行时域名
    host: '0.0.0.0',
    // 是否启用 https
    https: false,
    // pm run serve 时是否直接打开浏览器
    open: true,
    // 代理配置
    proxy: {
      // '/api': {
      //   target: 'http://localhost:3000',
      //   changeOrigin: true,
      //   pathRewrite: {
      //     '^/api': '',
      //   },
      // },
    },
  },
  pluginOptions: {
    // 这个配置项指定了要配置的插件名称,这个插件主要用于将公共的样式资源注入到所有的样式文件中，以便全局使用
    'style-resources-loader': {
      //指定了要处理的预处理器类型，这里是 less，表示要处理Less类型的样式文件。
      preProcessor: 'less',
      // 指定了需要注入的样式文件路径，这里是一个数组。指定了要注入的Less样式文件的绝对路径。
      patterns: [path.resolve(__dirname, './src/theme/theme.less')],
    },
  },
  // CSS 相关选项
  css: {
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中（而不是动态注入到 JavaScript 中的 inline 代码）
    extract: true,
    // 是否开启 CSS source map
    sourceMap: false,
    // 向 CSS 相关的 loader 传递选项
    loaderOptions: {
      sass: {
        sassOptions: { outputStyle: 'expanded' },
      },
      /**自适应配置 */
      postcss: {
        plugins: [
          // postcss
          require('postcss-pxtorem')({
            //换算基数，默认100，把根标签的font-size规定为1rem为50px,在设计稿上量出多少px直接在代码中写多少px
            rootValue: 16,
            //允许REM单位增长到的十进制数字,小数点后保留的位数
            unitPrecision: 5,
            propList: ['*'],
            //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            // exclude: /(node_module)/,
            exclude: false,
            //（布尔值）允许在媒体查询中转换px。
            mediaQuery: false,
            //要忽略并保留为px的选择器，本项目我是用的el ui框架，所以忽略他
            selectorBlackList: ['.el'],
            // 设置要替换的最小像素值(3px会被转rem)。 默认 0
            minPixelValue: 3,
          }),
        ],
      },
    },
  },

  // <-------------------插件及规则的配置-------------------->
  configureWebpack: {
    // 用于识别Webpack生成的文件
    name: name,
    // 这个部分是Webpack的模块解析配置
    resolve: {
      // alias 可以用于创建别名，
      // 例如 @ 别名指向项目中的 src 目录，让你在引入模块时可以使用 @ 作为路径的别名。
      alias: {
        '@': resolve('src'),
      },
      // extensions: 允许省略文件扩展名引入模块。
      // 例如，配置 .js、.vue、.json 后，当引入模块时可以省略这些后缀名。
      extensions: ['.js', '.vue', '.json'],
      // 在解析模块时，指定解析失败时的备选方案，通常用于指定某些模块的 polyfill 或者备用模块。
      fallback: {
        path: require.resolve('path-browserify'),
      },
    },
    // 构建过程中对静态资源进行gzip压缩的插件
    plugins: [
      // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
      // 这里使用了一个插件 CompressionPlugin
      new CompressionPlugin({
        // 指定需要压缩的文件格式，这里设置为匹配 .js、.css、.html 后缀的文件。
        test: /\.(js|css|html)?$/i,
        // 压缩后的文件名格式，[path].gz[query] 意味着生成的文件名将在原文件的基础上添加 .gz 后缀
        filename: '[path].gz[query]',
        // 指定使用的压缩算法，这里设置为 gzip 表示使用gzip进行压缩。
        algorithm: 'gzip',
        // 设置压缩率的阈值，只有达到该压缩率的文件才会被压缩。这里设置为 0.8，表示压缩率需要小于1才会进行压缩。
        minRatio: 0.8,
      }),
    ],
  },
  // 允许你在Webpack构建过程中使用链式操作来修改Webpack的配置
  chainWebpack(config) {
    // 这两行代码删除了Webpack中默认的预加载和预获取资源的插件。
    // 这可能是为了优化性能而移除了这些预加载和预获取的行为。
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test
   
    // 这段代码是使用 chainWebpack 配置中的 config.plugin('html')，针对 HTMLWebpackPlugin 插件进行自定义配置。
    // 根据条件 isProduction 或 devNeedCdn，在生产环境或需要 CDN 资源时，将 CDN 配置信息 cdn 注入到 HTMLWebpackPlugin 插件中。
    config.plugin('html').tap(args => {
      if (isProduction || devNeedCdn) args[0].cdn = cdn
      return args
    })
    
    // 配置了处理SVG图标的 loader，并设置了特定的选项，如 symbolId: 'icon-[name]'。
    // 在规则中排除了src/assets/icons目录之外的SVG文件，并且在规则中包含了src/assets/icons目录下的SVG文件。
    // set svg-sprite-loader
    config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
    config.module
      .rule('icons') //这里定义了一个名为 icons 的Webpack规则，用于处理SVG图标文件
      .test(/\.svg$/) //指定了匹配的文件格式为SVG，即以.svg结尾的文件会被这个规则匹配到。
      .include.add(resolve('src/assets/icons')) //将规则应用到 src/assets/icons 目录下的SVG文件上。
      .end() // 方法结束当前的链式调用，类似于链式调用的分隔符或者结束符号，
      .use('svg-sprite-loader') //使用了 svg-sprite-loader 这个loader来处理匹配到的SVG文件
      .loader('svg-sprite-loader') //方法和 use() 方法的作用类似，用于指定使用的loader名称。
      .options({
        //方法用于设置loader的选项，这里通过 svg-sprite-loader 的选项
        symbolId: 'icon-[name]', // 来指定生成的符号（symbol）的ID格式。这里设置为 'icon-[name]'，每个SVG图标会根据其名称生成对应的ID。
      })
      .end()

    // 在生产环境下，对图片进行压缩
    config.module
      .rule('images')
      // 使用正则表达式定义了要匹配的图片文件类型。这个规则会匹配文件名以.png、.jpg、.jpeg、.gif或.svg结尾的图片文件
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      // 通过.use()方法指定了要使用的loader，这里是image-webpack-loader。
      // image-webpack-loader是一个用于压缩和优化图片的loader，可以在构建过程中对图片进行处理以减小文件体积。
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      // options()方法用于传递给image-webpack-loader的选项。
      // bypassOnDebug: true表示在开发模式下（debug模式）跳过对图片的压缩处理，以加速构建过程。
      // 在生产环境下，图片压缩会被启用以减小文件大小，但在开发环境下，为了加快构建速度，会跳过这个压缩过程。
      .options({ bypassOnDebug: true })
  },
}