vite.config.js 配置及优化

基础环境

• vite版本：4+
• 项目框架：vue 3
• UI框架：Ant-Design-Vue
• 开发语言：TypeScript

vite.config.ts

import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { defineConfig, loadEnv } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

const pathResolve = (dir: string): string => {
  return resolve(__dirname, '.', dir)
}

// https://vitejs.dev/config/
export default defineConfig((command: any, mode: string) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [
      vue(),
      vueJsx(),
      Components({
        resolvers: [AntDesignVueResolver({ importStyle: 'less' })]
      })
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    base: '/evalweb/', // 开发或生产环境服务的公共基础路径
    server: {
      https: false,
      port: 8000,
      host: '0.0.0.0',
      proxy: {}
    },
    build: {
      outDir: 'evalweb', // 输出路径
      sourcemap: false, // 是否生成 source map 文件， https://cn.vitejs.dev/config/build-options.html#build-sourcemap
      chunkSizeWarningLimit: 1500, // 触发警告的 chunk 大小
      assetsInlineLimit: 1024 * 5, // 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。默认：4kb
      modulePreload: {
        polyfill: true // 预加载
      },
      cssCodeSplit: true, // 拆分 CSS 代码
      rollupOptions: {
        input: {
          index: pathResolve('index.html')
        },
        // 指定生成的 chunk 被放置在哪个目录中，这里指定在 static/js/ 下，hash 值长度为10
        output: {
          chunkFileNames: 'static/js/[name]-[hash:10].js', // 自定义命名代码分割中产生的 chunk 
          entryFileNames: 'static/js/[name]-[hash:10].js', // 指定 chunks 的入口文件模式
          assetFileNames: 'static/[ext]/[name]-[hash:10].[ext]' // 自定义构建结果中的静态资源名称
        }
      }
    },
    css: {
      preprocessorOptions: {
        less: {
          // 修改 ant-design 主题及样式
          modifyVars: {
            hack: `true; @import '@/style/ant-design.less'; @import '@/style/canon-color.less'; @import '@/style/mixin.less';`
          },
          javascriptEnabled: true
        }
      }
    }
  }
})

ant-design.less

// 通用配置
@primary-color: #3563ec; // 全局主色
@link-color: #3563ec; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #ff4d4f; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: #3d3d3d; // 标题色
@text-color: #1d2129; // 主文本色
@text-color-secondary: #4e5969; // 次文本色
// @disabled-color: #5e83f0; // 失效色
@border-radius-base: 8px; // 组件/浮层圆角
@border-color-base: #f1f3f6; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.16); // 浮层阴影

// 表格
@table-header-bg: #f6f7fa; // 表格头背景
@table-header-color: #1d2129; // 表格标题色
@table-border-color: #f1f3f6; // 表格边框
@table-padding-vertical: 14px; // 表格上下间距
.ant-table-thead > tr > th {
  font-weight: 700;
}
.ant-table-summary {
  background-color: #f6f7fa;
}

// 选择框
@select-background: #f7f8fa; // 选择框背景色

// 按钮
@btn-padding-horizontal-base: 18px; // 标准按钮左右 padding
.primary-plain {
  background-color: #eaeffd;
  color: #3563ec;
}

// 树形结构
.ant-tree-switcher-noop {
  display: none;
}

// 菜单
.ant-menu-vertical .ant-menu-item::after,
.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-vertical-right .ant-menu-item::after,
.ant-menu-inline .ant-menu-item::after {
  display: none;
}

// 分页
@pagination-item-bg-active: #e8f4ff;
.ant-pagination-item {
  border: none;
}
.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  border: none;
}

// 分割线
.ant-divider-horizontal {
  margin: 16px 0;
}

// 输入框
@input-bg: #f7f8fa; // 输入框背景色

// 文件上传
.ant-upload.ant-upload-drag {
  border: 1px dashed #d9d9d9;
}

// tabs 样式
@tabs-ink-bar-color: #1d2129;
@tabs-highlight-color: #1d2129;
@tabs-hover-color: #1d2129;
@tabs-active-color: #86909c;
.ant-tabs-tab {
  color: #86909c;
}

// tag 样式
@tag-line-height: 16px;
.ant-tag {
  border-radius: 2px;
}

// drawer 样式
.ant-drawer-body {
  padding-top: 0;
}

// spin 加载动画
.ant-spin-nested-loading {
  width: 100%;
}
.ant-spin-nested-loading > div > .ant-spin {
  max-height: 100%;
}

// 日期选择
.ant-picker {
  background: #f7f8fa;
}