Regulations_Front_Vue_Two/vue.config.js

/*
 * @Author: smy
 * @Description:
 * @Date: 2022-06-20 16:00:18
 * @LastEditTime: 2022-12-14 10:41:43
 * @FilePath: /AutomationPlatformFront/vue.config.js
 */
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path')
const webpack = require('webpack')
function resolve(dir) {
  return path.join(__dirname, dir)
}
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const CompressionPlugin = require('compression-webpack-plugin')
const _mode = process.env.NODE_ENV
const server = _mode === 'development' ? 'http://222.128.14.106:11179/api' : 'test' ? '/test-api' : '/api'
const defaultSettings = require('./src/setting')
const name = defaultSettings.projectTitle || 'testDemo' // page title

module.exports = {
  lintOnSave: false,
  productionSourceMap: false,
  assetsDir: 'static',
  // 生产环境，项目部署在服务器子目录cms下，用于查找静态资源
  publicPath: '/',
  devServer: {
    proxy: {
      '/dev-api': {
        target:server,
        changeOrigin: true,
        pathRewrite: {
          '^/dev-api': '',
        },
      },
    },
    open: true, // 配置自动启动浏览器
    // disableHostCheck: true, //webpack4.0 开启热更新
  },

  css: {
    // extract: true, // 解决开发模式，打包时未提取CSS的问题 (开发模式先注释)
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#3d62ff', // 修改全局主颜色
          },
          javascriptEnabled: true,
        },
      },
    },
  },
  configureWebpack: (config) => {
    config.name = name
    config.resolve = {
      ...config.resolve,
      alias: {
        '@': resolve('src'),
        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js', // 解决国际化预警
      },
    }

    config.module.rules.push({
      test: path.resolve(__dirname, 'node_modules/leader-line/'),
      use: [
        {
          loader: 'skeleton-loader',
          options: {
            procedure: (content) => `${content}export default LeaderLine`,
          },
        },
      ],
    })
    config.plugins.push(
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery',
      })
    )
    // // 对生产环境的配置
    if (process.env.NODE_ENV === 'production') {
      const plugns = [
        // 去除console.log
        new UglifyJsPlugin(),

        // 代码压缩
        // new CompressionPlugin({
        //   test: /\.(js|css)$/,
        //   threshold: 10240, // 小于10KB就不进行压缩
        //   minRatio: 0.8, // 压缩比率
        //   deleteOriginalAssets: true, // 删除源文件
        // }),
      ]
      config.plugins.push(...plugns)
    }
  },
  runtimeCompiler: true, // 解决菜单栏 template 模版编译问题

  chainWebpack: (config) => {
    // 优化首屏加载速度--移除 preload & prefetch 插件
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')

    // 解决 isCustomElement 预警
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        options.compilerOptions = {
          ...options.compilerOptions,
          isCustomElement: (tag) => tag.startsWith('svg-'),
        }
        return options
      })
    // 配置识别 svg 规则
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
    const fileRule = config.module.rule('file')
    fileRule.uses.clear()
    fileRule
      .test(/\.svg$/)
      .exclude.add(resolve('src/icons'))
      .end()
      .use('file-loader')
      .loader('file-loader')

    config.when(_mode === 'production', (config) => {
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial', // only package third parties that are initially dependent
          },
          elementUI: {
            name: 'chunk-elementUI', // split elementUI into a single package
            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
            test: /[\\/]node_modules[\\/]_?ant-design-vue(.*)/, // in order to adapt to cnpm
          },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'),
            minChunks: 3,
            priority: 5,
            reuseExistingChunk: true, // 表示是否使用已有的chunk，如果为true，则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。
          },
        },
      })
      // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
      config.optimization.runtimeChunk('single')
    })
  },
}