refactor(pc): 从 Gi Admin Pro + Arco 重搭为纯 Vue 3 + Naive UI
旧模板的 193 个文件整体删除,换成纯 Vue 3.5 + Naive UI 2.42 的树。
- 去掉 auto-import(组件与 API 全显式 import)、v-hasPerm(改 user.has('码'),全库 8 处)、
Stylelint;n-tag 的 type 统一过 utils/tag.ts 转换(Arco 色词直接透传会静默变灰)
- 图标改为构建期抽取:scripts/extract-pc-icons.py -> icons/icon-data.ts(37 个),
内网离线部署不会白屏
- 重搭后修掉 6 类"编译 / lint / typecheck 全绿、界面上就是坏的"故障:
① NGrid 的 cols 写成像素值(不是断点名 -> 永远只 1 列,工作台因此错乱)
② n-tab-pane 用 tab 属性(只渲染空注释节点,整排 tab 一个字都不显示)
③ 漏 import 被当未知自定义元素(样式整块丢) ④ .n-card__content 类名不存在
(高度链第一环失效,表格行在 DOM 里但屏幕上没有) ⑤ 填报单状态映射错位一格
⑥ 有标题的卡片没有上内边距(naive 的 padding-top 只给"内容区是长子"的卡片)
- 卡片式版面提成全局基线:styles/index.scss 的 xt-* 令牌 + .page-card / .toolbar /
.section-title,页面只引用、不再各写一套
- 品牌:改名「深学在线」,文字标换成几何标(方 = 卷宗 / 环 = 在线,不用文字字形);
index.html 的页签图标从 404 的 /favicon.ico 改指真实存在的 /favicon.svg
This commit is contained in:
+18
-92
@@ -1,115 +1,41 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import IconsResolver from 'unplugin-icons/resolver'
|
||||
import Icons from 'unplugin-icons/vite'
|
||||
import { ArcoResolver } from 'unplugin-vue-components/resolvers'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import vitePluginCompression from 'vite-plugin-compression'
|
||||
import VueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
/**
|
||||
* 管理端(Vue 3 + Naive UI)构建配置。
|
||||
*
|
||||
* ⚠️ 与上一版(Gi Admin Pro + Arco)的差别:**没有** unplugin-auto-import /
|
||||
* unplugin-vue-components / Arco 解析器。理由有两个:
|
||||
* 1. 组件与 API 全部**显式 import** —— vue-tsc 看到的就是真的,
|
||||
* 不依赖"生成但不一定提交/更新"的 `components.d.ts`;
|
||||
* 2. 少一层构建期魔法:出问题时读代码就能定位。
|
||||
*/
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, process.cwd()) as ImportMetaEnv
|
||||
const env = loadEnv(mode, process.cwd())
|
||||
|
||||
return {
|
||||
// 开发或生产环境服务的公共基础路径
|
||||
base: env.VITE_BASE,
|
||||
// 路径别名
|
||||
base: env.VITE_BASE || '/',
|
||||
resolve: {
|
||||
alias: {
|
||||
'~': fileURLToPath(new URL('./', import.meta.url)),
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
},
|
||||
// 确保正确解析模块
|
||||
dedupe: ['vue', '@arco-design/web-vue']
|
||||
},
|
||||
// 依赖优化配置
|
||||
optimizeDeps: {
|
||||
include: ['@arco-design/color']
|
||||
},
|
||||
// 引入scss全局样式变量
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `@use "@/styles/var.scss" as *;`
|
||||
}
|
||||
}
|
||||
},
|
||||
server: {
|
||||
// 服务启动时是否自动打开浏览器
|
||||
open: false,
|
||||
// 本地跨域代理 -> 代理到服务器的接口地址
|
||||
port: 5173,
|
||||
proxy: {
|
||||
// 本地开发:/api → Spring Boot 8080(本仓库没有 Mock,见 AGENTS.md)
|
||||
'/api': {
|
||||
target: env.VITE_API_BASE_URL, // 后台服务器地址
|
||||
changeOrigin: true, // 是否允许不同源
|
||||
secure: false, // 支持https
|
||||
rewrite: (path) => path.replace(/^\/api/, '/api')
|
||||
target: env.VITE_API_BASE_URL,
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
vueJsx(),
|
||||
VueDevTools(),
|
||||
AutoImport({
|
||||
// 自动导入vue相关函数,如: ref、reactive、toRef等
|
||||
imports: ['vue', 'vue-router', {
|
||||
// vue 3.5.x
|
||||
vue: ['useTemplateRef', 'onWatcherCleanup', 'useId']
|
||||
}],
|
||||
dts: 'src/auto-import.d.ts'
|
||||
}),
|
||||
Components({
|
||||
// 指定组件位置,默认是 src/components 自动导入自定义组件
|
||||
dirs: ['src/components/Gi*'],
|
||||
extensions: ['vue', 'tsx'],
|
||||
// 配置文件生成位置
|
||||
dts: 'src/components.d.ts',
|
||||
// Arco Design Vue 按需导入配置(使用官方推荐的 ArcoResolver)
|
||||
resolvers: [
|
||||
ArcoResolver({
|
||||
sideEffect: false
|
||||
}),
|
||||
// Iconify 图标按需导入
|
||||
IconsResolver({
|
||||
prefix: 'icon',
|
||||
enabledCollections: ['icon-park-outline']
|
||||
})
|
||||
]
|
||||
}),
|
||||
// Iconify 图标插件配置
|
||||
Icons({
|
||||
compiler: 'vue3',
|
||||
autoInstall: true,
|
||||
defaultClass: 'iconify-icon',
|
||||
defaultStyle: 'vertical-align: middle;'
|
||||
}),
|
||||
// Gzip 压缩配置
|
||||
vitePluginCompression({
|
||||
verbose: true, // 是否在控制台输出压缩结果
|
||||
disable: false, // 是否禁用压缩
|
||||
deleteOriginFile: false, // 压缩后是否删除原文件
|
||||
threshold: 10240, // 压缩阈值,单位:字节,超过此大小的文件才会被压缩(10KB)
|
||||
algorithm: 'gzip', // 压缩算法,可选 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw'
|
||||
ext: '.gz', // 压缩文件扩展名
|
||||
filter: /\.(js|mjs|json|css|html|svg|ico|eot|otf|ttf|ttc|woff|woff2)$/i // 需要压缩的文件类型
|
||||
})
|
||||
],
|
||||
// 构建
|
||||
build: {
|
||||
chunkSizeWarningLimit: 2000
|
||||
outDir: 'dist',
|
||||
chunkSizeWarningLimit: 1500
|
||||
},
|
||||
// 生产环境优化
|
||||
esbuild:
|
||||
mode === 'development'
|
||||
? undefined
|
||||
: {
|
||||
pure: ['console.log'],
|
||||
drop: ['debugger'],
|
||||
legalComments: 'none'
|
||||
}
|
||||
plugins: [vue()]
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user