vue3+ts+vite antd自定义主题和vite打包配置资源压缩和分类打包， 第十一回

直接贴出vite.config.ts 的配置

  plugins:[
      vue(),
      AutoImport({
        imports: ['vue', 'vue-router'], // 自动导入vue和vue-router
        resolvers:[
          AntDesignVueResolver(), // 自动导入ant-design-vue
        ]
      }),
      Components({
        resolvers:[AntDesignVueResolver({importStyle:"less", resolveIcons: true})] // 自动导入和注册 antd 组件库
      }),
      viteCompression({
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: 'gzip', // 使用gzip 压缩资源
        ext: '.gz',
        deleteOriginFile: true, // 压缩后是否删除压缩源文件
      })
    ],
    css: {
      preprocessorOptions: {  // antd自定义主题
        less: {
          modifyVars: {
            'primary-color': '#5865F2',
            'link-color': '#5865F2',
          }, 
          javascriptEnabled: true,
        },
      },
    },
    envDir:'./env', // 配置env文件目录
    envPrefix:['VITE_','APP_'], // 配置env文件前缀
    build:{
        minify: 'esbuild',
        chunkSizeWarningLimit: 1000, // 提高超大静态资源警告大小
        cssCodeSplit: true,
        emptyOutDir: true,
        sourcemap: false,
        assetsDir: 'assets', // 默认 assets
        outDir: 'dist',      // 默认 dist
        rollupOptions: {
            output: {
                compact: true,
                entryFileNames: "static/js/[name]-[hash].js",
                chunkFileNames: "static/js/[name]-[hash].js",
                assetFileNames: "static/[ext]/[name].[ext]",
                manualChunks(id) {
                  if (id.includes('node_modules')) {
                    return id.toString().split('node_modules/')[1].split('/')[0].toString();
                  }
                }
            }
        },
    },
    esbuild: { // 打包的过程里删掉开发的时候各种console和debugger
      drop: mode === 'production' ? ['console', 'debugger'] : []
    },
　　

　　开启gizp资源压缩之后，需要更改nginx的配置，找到nginx使用的配置文件，加入以下配置

# 开 启 gzip功 能
gzip on;
# 开 启 gzip静 态 压 缩 功 能
gzip_static on;
# gzip缓 存 大 小
gzip_buffers 4 16k;
# gzip http版 本
gzip_http_version 1.1;
# gzip 压 缩 级 别 1-10
gzip_comp_level 5;
# gzip 压 缩 类 型
gzip_types text/plain application/javascript text/css application/xml text/javascript image/jpeg image/gif image/png;
 
# 是 否 在 http header中 添 加 Vary: Accept-Encoding， 建 议 开 启
gzip_vary on;

 
配置完之后，需要重新reload一下，使新的配置生效

nginx -s reload