vite.config.js

import { defineConfig } from "vite";
import { resolve } from "path";
import vue from "@vitejs/plugin-vue";
import viteCompression from "vite-plugin-compression";
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "unplugin-vue-components/resolvers";
import legacyPlugin from "@vitejs/plugin-legacy";
import { visualizer } from "rollup-plugin-visualizer";
import viteImagemin from "vite-plugin-imagemin";
function pathResolve(dir) {
  return resolve(__dirname, ".", dir);
}
export default defineConfig({
  base: "/",
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    }),
    viteCompression({
      //gzip压缩
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: "gzip",
      ext: ".gz"
      // deleteOriginFile: true // 源文件压缩后是否删除
    }),
    legacyPlugin({
      targets: ["chrome 52"], //需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"], //面向IE11时需要此插件
      renderLegacyChunks: true,
      polyfills: [
        "es.symbol",
        "es.promise",
        "es.promise.finally",
        "es/map",
        "es/set",
        "es.array.filter",
        "es.array.for-each",
        "es.array.flat-map",
        "es.object.define-properties",
        "es.object.define-property",
        "es.object.get-own-property-descriptor",
        "es.object.get-own-property-descriptors",
        "es.object.keys",
        "es.object.to-string",
        "web.dom-collections.for-each",
        "esnext.global-this",
        "esnext.string.match-all"
      ],
      build: {
        target: "es2015"
      }
    }),
    visualizer(),
    viteImagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false
      },
      optipng: {
        optimizationLevel: 7
      },
      mozjpeg: {
        quality: 20
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4
      },
      svgo: {
        plugins: [
          {
            name: "removeViewBox"
          },
          {
            name: "removeEmptyAttrs",
            active: false
          }
        ]
      }
    })
  ],
  resolve: {
    alias: {
      "/@": pathResolve("src") //自定义路径
    }
  },
  optimizeDeps: {
    include: ["vue"] //预加载
  },
  build: {
    chunkSizeWarningLimit: 1000,
    assetsInlineLimit: 12288, //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。
    targets: "modules",
    outDir: "dist",
    assetsDir: "assets",
    brotliSize: false, // 设置为false将禁用构建的brotli压缩大小报告。可以稍微提高构建速度
    minify: "terser", // 混淆器。
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
    reportCompressedSize: false, // 关闭文件计算
    sourcemap: false, // 这个生产环境一定要关闭，不然打包的产物会很大
    rollupOptions: {
      treeshake: true, // 开启 Tree Shaking，消除未使用的代码，减小最终的包大小
      output: {
        //静态资源分类打包
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
        assetFileNames: "assets/[name]-[hash][extname]",
        manualChunks(id) {
          //静态资源分拆打包
          if (id.includes("node_modules")) {
            return id.toString().split("node_modules/")[1].split("/")[0].toString();
          }
        }
      }
    },
    commonjsOptions: {
      requireReturnsDefault: "namespace" // 要求ES模块返回其名称空
    }
  },
  server: {
    cors: true,
    open: true,
    host: "你的本地IP地址",
    port: 4001,
    proxy: {
      "/hostApi": {
        // target: 'https://xxx.com', //api
        changeOrigin: true,
        rewrite: path => path.replace(/^\/hostApi/, "")
      }
    }
  }
});