gd-vite-core
v1.0.15
Published
广达 Vue3 后台管理模板脚手架
Maintainers
gdiconfontReadme
gd-vite-core
广达 Vue3 后台管理模板脚手架
安装
pnpm add gd-vite-core -D
# 或
npm install gd-vite-core -D使用
1. 创建 vite.config.ts
import scaffold from 'gd-vite-core';
export default scaffold.vite();2. 配置 AntDesign 按需引入
import scaffold from 'gd-vite-core';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default scaffold.vite({
plugins: [
Components({
resolvers: [
AntDesignVueResolver({
importStyle: false, // css in js
}),
],
}),
],
});3. 配置外部脚本（CDN）
export default scaffold.vite({
scripts: [
'https://cdn.bootcdn.net/ajax/libs/vue/3.4.0/vue.global.prod.min.js',
'https://cdn.bootcdn.net/ajax/libs/ant-design-vue/4.2.0/ant-design.min.js',
],
});4. 配置构建资源 CDN
构建时通过 VITE_CDN_URL 传入 CDN 目录。脚手架会同时设置 Vite 的资源根路径，
并把规范化后的地址写入 app.config.js 的 window.config.cdnUrl：
VITE_CDN_URL=https://cdn.example.com/apps/my-app/release-id/ npm run build未配置时默认使用相对资源路径 ./。
5. 配置开发服务器
可以自定义开发服务器端口、host、自动打开浏览器等配置：
export default scaffold.vite({
server: {
port: 5173, // 自定义端口，默认 5173
host: true, // 允许局域网访问，默认 '0.0.0.0'
open: true, // 启动后自动打开浏览器，默认 false
cors: true // 开启跨域支持，默认 true
},
});6. 配置代理
export default scaffold.vite({
proxy: {
myApi: 'http://localhost:8080/api',
},
});7. 配置系统标识（systemId）
通过环境变量 VITE_APP_SYSTEM_ID 注入系统标识到 window.config，按 dev/prod 环境隔离：
# .env.development
VITE_APP_SYSTEM_ID=dev-system-id
# .env.production
VITE_APP_SYSTEM_ID=prod-system-id业务代码读取：
window.config.systemId; // 'prod-system-id'8. 配置运行时变量（runtimeConfig）
在 vite.config.ts 中通过 runtimeConfig 扩展任意运行时配置，支持字符串、数字、布尔、数组、对象等类型：
export default scaffold.vite({
runtimeConfig: {
appName: '后台管理系统',
timeout: 5000,
features: ['role', 'permission'],
oss: { region: 'cn-wlcb', bucket: 'my-bucket' },
},
});业务代码读取：
window.config.appName; // '后台管理系统'
window.config.timeout; // 50009. 默认生产分包
生产构建会在依赖存在时自动生成以下公共 chunk：
vendor-vue-[hash].js：Vue 运行时。vendor-ant-design-vue-[hash].js：Ant Design Vue 组件库。vendor-ant-design-icons-[hash].js：Ant Design Vue 图标、SVG 和颜色计算依赖。
其余异步模块继续使用 js/chunk-[hash].js 命名。Vue 和颜色依赖单独归组，避免 Ant Design Vue 与图标 chunk 之间产生循环依赖。
API
scaffold.vite(options?)
| 参数 | 类型 | 说明 |
|------|------|------|
| plugins | Plugin[] | Vite 插件配置，会追加到默认插件后面 |
| server | object | 开发服务器配置 |
| proxy | object | 代理配置 |
| root | string | 源码目录，默认 src |
| scripts | string[] | 外部脚本 URL，会注入到 HTML <head> |
| enableConfigInject | boolean | 是否启用 app.config.js 注入，默认 true |
| runtimeConfig | Record<string, any> | 运行时配置，合并到 window.config 中，同名键可覆盖内置字段 |
导出
export { proxy, getProxyKeys, getProxyTarget } from 'gd-vite-core';
export { defaultServerConfig, getServerConfig, generateProxyConfig } from 'gd-vite-core';
export { alias, srcPath, rootPath } from 'gd-vite-core';
export { getVuePlugin, getRequireTransformPlugin, createConfigInjectPlugin } from 'gd-vite-core';默认插件
@vitejs/plugin-vue- Vue3 支持vite-plugin-require-transform- require 语法转换config-inject-plugin- app.config.js 运行时配置注入