vue.config.js的配置

vue.config.js的配置

const path = require('path')
const CompressionPlugin = require("compression-webpack-plugin")
const MomentLocalesPlugin = require('moment-locales-webpack-plugin')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const chalk = require('chalk')
function resolve(dir) {
  return path.join(__dirname, dir)
}

// vue.config.js
module.exports = {
  /*
    Vue-cli3:
    Crashed when using Webpack `import()` #2463
    https://github.com/vuejs/vue-cli/issues/2463
   */
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  //qiankuan打包时放开
  //outputDir: "../dist/main",
  // 多入口配置
  // pages: {
  //   index: {
  //     entry: 'src/main.js',
  //     template: 'public/index.html',
  //     filename: 'index.html',
  //   }
  // },
  //打包app时放开该配置
  publicPath: process.env.VUE_APP_STATIC_URL,
  configureWebpack: config => {
    //生产环境取消 console.log
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
            // 不打包 tinymce
            config.externals = {
              "vxe-table": "vxeTable",
              "vxe-table-plugin-antd": "vxeTablePluginAntd",
              "xe-utils": "xeUtils",
            }
            
    // config.optimization = {
    //   splitChunks: {
    //     chunks: 'all',
    //     minSize: 0,
    //     minChunks: 1,
    //     cacheGroups: {
    //       vendors: {
    //         name: 'chunk-vendors',
    //         test: /[\\/]node_modules[\\/]/,
    //         priority: -10,
    //         reuseExistingChunk: true,
    //         chunks: 'all'
    //       },
    //       common: {
    //         name: 'chunk-common',
    //         minChunks: 2,
    //         priority: -20,
    //         reuseExistingChunk: true,
    //         chunks: 'all'
    //       },
    //       elementUI: {
    //         name: 'chunk-elementUI',
    //         priority: 20, // initial the weight needs to be larger than libs and app or it will be packaged into libs or app
    //         test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
    //         chunks: 'all'
    //       },
    //       echarts: {
    //         name: 'chunk-echarts',
    //         priority: 20,
    //         test: /[\\/]node_modules[\\/]_?echarts(.*)/,
    //         chunks: 'all'
    //       }
    //       // moment: {
    //       //   priority: 20,
    //       //   test: /[\\/]node_modules[\\/]_?moment(.*)/,
    //       //   reuseExistingChunk: true
    //       // }
    //     }
    //   }
    // }
    }
     // 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
    // __diename 表示当前工作目录，也就是项目根目录
    config.resolve.modules.unshift(resolve('node_modules'))
    // 缩小查找后缀文件的范围
    config.resolve.extensions = ['.js', '.vue', '.json']
    // // mainFields设置尽量少的值，可以减少入口文件的搜索解析
    // config.resolve.mainFields = ['main']
    // 防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中 
    // 不应该含有 import, require, define 的调用，或任何其他导入机制。忽略大型的 library 可以提高构建性能。
    config.module.noParse = /^(vue|vue-router|vuex|vuex-router-sync|jquery|lodash|chartjs|echarts)$/

    config.plugins.push(new ProgressBarPlugin({
      format: `  :msg [:bar] ${chalk.green.bold(':percent')} (:elapsed s)`
    }), new MomentLocalesPlugin({ localesToKeep: ['zh-cn'] }))
  },
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('@api', resolve('src/api'))
      .set('@assets', resolve('src/assets'))
      .set('@comp', resolve('src/components'))
      .set('@views', resolve('src/views'))
    //生产环境，开启js\css压缩
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin').use(
        new CompressionPlugin({
            test: /\.(js|css|html)$/, // 匹配文件名
            filename: '[path].gz[query]',　// 压缩后的文件名
            algorithm: 'gzip',　// 使用gzip压缩
            minRatio: 1,　// 压缩率小于1才会压缩
            threshold: 10240,
            deleteOriginalAssets: false //是否删除原文件
        })
    )
        // config.plugin('compressionPlugin').use(new CompressionPlugin({
        //   test: /\.(js|css|less)$/, // 匹配文件名
        //   threshold: 10240, // 对超过10k的数据压缩
        //   deleteOriginalAssets: false // 不删除源文件
        // }))
    }
    // 修改处理js
    
    config.module.rule('js')
    .test(/\.m?jsx?$/)
    .use('babel-loader')
    .loader('babel-loader')
    .options({
      cacheDirectory: true
    })
    .end()
    .include
      .add(resolve('src'))
      .end()
    .exclude
      .add(resolve('node_modules'))
      .end()
   
    // 配置 webpack 识别 markdown 为普通的文件
    config.module
      .rule('markdown')
      .test(/\.md$/)
      .use()
      .loader('file-loader')
      .end()

    // 编译vxe-table包里的es6代码，解决IE11兼容问题
    config.module
      .rule('vxe')
      .test(/\.js$/)
      .include
        .add(resolve('node_modules/vxe-table'))
        .add(resolve('node_modules/vxe-table-plugin-antd'))
        .end()
      .use('cache-loader')
      .loader('cache-loader')
      .options({
        cacheDirectory: resolve('node_modules/.cache/babel-loader')
      })
      .end()
      .use('babel-loader')
      .loader('babel-loader')
      .options({
        cacheDirectory: true
      })
      .end()
  },

  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          /* less 变量覆盖，用于自定义 ant design 主题 */
          'primary-color': '#1890FF',
          'link-color': '#1890FF',
          'border-radius-base': '4px',
        },
        javascriptEnabled: true,
      }
    }
  },

  devServer: {
    port: 3000,
    // hot: true,
    // disableHostCheck: true,
    // overlay: {
    //     warnings: false,
    //     errors: true,
    // },
    // headers: {
    //     'Access-Control-Allow-Origin': '*',
    // },
    proxy: {
     /* '/api': {
        target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', //mock API接口系统
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '/jeecg-boot': ''  //默认所有请求都加了jeecg-boot前缀，需要去掉
        }
      },*/
      '/jeecg-boot': {
        target: 'http://localhost:8080', //请求本地 需要jeecg-boot后台项目
        ws: false,
        changeOrigin: true
      },
    }
  },

  lintOnSave: undefined
}