windLifecontrolPro/vue.config.js

/*
 * @Date: 2023-06-18 10:09:15
 * @LastEditors: zhubj
 * @LastEditTime: 2023-06-19 10:49:41
 * @Description: 头部注释
 * @FilePath: \own-vue3-vuecli-template\vue.config.js
 */
'use strict'
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const { defineConfig } = require('@vue/cli-service')

const name = process.env.VUE_APP_TITLE || '网页标题' // 网页标题

const port = process.env.port || process.env.npm_config_port || 8011 // 端口

// element-plus 按需导入自动导入的插件
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
// 实现 gzip 压缩打包
const CompressionPlugin = require('compression-webpack-plugin')

// 添加less继承
function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [resolve("src/assets/styles/common/common.less")],
    });
}

function extendDefaultPlugins(arr) {
  let plug = [
    "removeDoctype",
    "removeXMLProcInst",
    "removeComments",
    "removeMetadata",
    "removeEditorsNSData",
    "cleanupAttrs",
    "mergeStyles",
    "inlineStyles",
    "minifyStyles",
    "cleanupIDs",
    "removeUselessDefs",
    "cleanupNumericValues",
    "convertColors",
    "removeUnknownsAndDefaults",
    "removeNonInheritableGroupAttrs",
    "removeUselessStrokeAndFill",
    "removeViewBox",
    "cleanupEnableBackground",
    "removeHiddenElems",
    "removeEmptyText",
    "convertShapeToPath",
    "convertEllipseToCircle",
    "moveElemsAttrsToGroup",
    "moveGroupAttrsToElems",
    "collapseGroups",
    "convertPathData",
    "convertTransform",
    "removeEmptyAttrs",
    "removeEmptyContainers",
    "mergePaths",
    "removeUnusedNS",
    "sortDefsChildren",
    "removeTitle",
    "removeDesc",
  ];
  return plug.concat(arr);
}

module.exports = defineConfig({
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径
  // 例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录的内容在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
  outputDir: 'dist',
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: 'static',
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖（对所有的依赖都进行转译可能会降低构建速度）
  transpileDependencies: false,
  // webpack-dev-server 相关配置
  devServer: {
    client: {
      progress: true,
      overlay: false
    },
    host: '0.0.0.0',
    port: port,
    open: false,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      // [process.env.VUE_APP_GENERAT_URL]: {
      //     // target: 'http://123.60.219.66:9002',
      //     target: 'http://192.168.2.12:9002',
      //     changeOrigin: true, //开启代理
      //     pathRewrite: {
      //         [process.env.VUE_APP_GENERAT_URL]: ''
      //     }
      // },
      // [process.env.VUE_APP_BASE_URL]: {
      //     target: 'http://123.60.219.66:8086',
      //     changeOrigin: true,
      //     pathRewrite: {
      //         [process.env.VUE_APP_BASE_URL]: ''
      //     }
      // }
    }
  },
  // 和webpapck属性完全一致，最后会进行合并
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
        '@tools': resolve('./src/tools'),
        '@api': resolve('./src/api'),
        '@com': resolve('./src/components'),
        '@public': resolve('public'),
        '@node': resolve('node_modules'),
        '@assets': resolve('src/assets'),
        '@store': resolve('src/store'),
        '@modeConfig': resolve('public/static/config'),
        // 'cesium': resolve('node_modules/cesium/Source'),
      },
      fallback: {
        "https": false,
        "zlib": false,
        "http": false,
        "url": false
      },
      mainFiles: ['index', 'Cesium']
    },
    //配置webpack自动按需引入element-plus
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
      new CompressionPlugin({
        test: /\.(js|css|html)?$/i,     // 压缩文件格式
        filename: '[path][base].gz',   // 压缩后的文件名
        algorithm: 'gzip',              // 使用gzip压缩
        threshold: 10240,               // 最小文件开启压缩
        minRatio: 0.8                   // 压缩率小于1才会压缩
      })
    ],
  },

  chainWebpack(config) {
    // less 继承
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach((type) =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );

    const metaLoaderRule = config.module.rule("meta-loader");
    metaLoaderRule
      .test(/\.js$/)
      .use("@open-wc/webpack-import-meta-loader")
      .loader("@open-wc/webpack-import-meta-loader");

    // svg 雪碧图
    config.module // 排除其他svg-loader
      .rule("svg")
      .exclude.add(resolve("src/assets/icon/svg"))
      .end()
      .exclude.add(resolve("src/assets/icon/svg_fill"))
      .end();

    // svg雪碧图
    const svgRule = config.module.rule("icons");
    svgRule
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icon/svg"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "svg-[name]",
      });

    // svgo 去除svg中无用元素
    svgRule
      .use("svgo-loader")
      .loader("svgo-loader")
      .options({
        plugins: extendDefaultPlugins([
          {
            name: "removeAttrs",
            params: {
              attrs: "fill",
            },
          },
        ]),
      });
  }
})