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",
            //   "moment-timezone": "momentTimezone"
            // }
            
    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']
    // 防止 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'))
    
      // 删除需要预先加载(当前页面)的资源，当需要这些资源的时候，页面会自动加载
      config.plugins.delete('preload')
      // 删除需要预先获取(将来的页面)的资源
      config.plugins.delete('prefetch')
    //生产环境，开启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 // 不删除源文件
        // }))
    }
    // 配置 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()
      .loader('babel-loader')
      .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
}