基本的な環境
- 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;
}