ViteKit CLI配置
本页面介绍如何配置和自定义 ViteKit CLI 以满足您的开发需求。
配置文件
全局配置
您可以在用户主目录创建 .vitekitrc 文件来设置全局默认配置：
json
{
"defaultTemplate": "vue",
"registry": "https://registry.npmjs.org",
"skipGit": false,
"skipInstall": false,
"author": "Your Name",
"email": "your.email@example.com"
}
项目配置
在项目根目录创建 vitekit.config.js 文件来配置项目特定的设置：
javascript
export default {
// 自定义构建配置
build: {
outDir: 'dist',
sourcemap: true
},
// 开发服务器配置
server: {
port: 3000,
open: true
},
// 插件配置
plugins: [
// 自定义插件
]
}
配置选项
基础配置
| 选项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
defaultTemplate | string | "vue" | 默认项目模板 |
registry | string | "https://registry.npmjs.org" | npm 注册表地址 |
skipGit | boolean | false | 跳过 Git 初始化 |
skipInstall | boolean | false | 跳过依赖安装 |
author | string | "" | 默认作者名称 |
email | string | "" | 默认邮箱地址 |
模板配置
json
{
"templates": {
"vue": {
"name": "Vue 3 + TypeScript",
"description": "Vue 3 项目模板",
"features": ["router", "pinia", "typescript"]
},
"react": {
"name": "React + TypeScript",
"description": "React 项目模板",
"features": ["router", "zustand", "typescript"]
}
}
}
构建配置
json
{
"build": {
"outDir": "dist",
"sourcemap": true,
"minify": true,
"target": "es2015"
}
}
开发服务器配置
json
{
"server": {
"port": 3000,
"host": "localhost",
"open": true,
"cors": true
}
}
环境变量
系统环境变量
| 变量名 | 描述 | 示例 |
|---|---|---|
VITEKIT_REGISTRY | npm 注册表地址 | https://registry.npmmirror.com |
VITEKIT_TEMPLATE_DIR | 自定义模板目录 | /path/to/templates |
VITEKIT_CONFIG_PATH | 配置文件路径 | /path/to/.vitekitrc |
VITEKIT_CACHE_DIR | 缓存目录 | /path/to/cache |
项目环境变量
在项目根目录创建 .env 文件：
bash
# 开发环境配置
VITE_APP_TITLE=My App
VITE_APP_VERSION=1.0.0
VITE_API_BASE_URL=http://localhost:8080/api
# 构建配置
VITE_BUILD_SOURCEMAP=true
VITE_BUILD_MINIFY=true
自定义模板
创建本地模板
- 创建模板目录：
bash
mkdir my-custom-template
cd my-custom-template
- 创建模板文件：
bash
# 创建基础结构
mkdir -p src/{components,utils,styles}
touch src/main.ts src/App.vue
touch package.json vite.config.ts tsconfig.json
- 创建模板配置
template.json：
json
{
"name": "My Custom Template",
"description": "自定义项目模板",
"version": "1.0.0",
"features": ["typescript", "vue3"],
"dependencies": {
"vue": "^3.3.0",
"@vitejs/plugin-vue": "^4.0.0"
},
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
- 使用自定义模板：
bash
vitekit my-project --template file:./my-custom-template
发布模板到 GitHub
- 创建 GitHub 仓库
- 推送模板代码
- 使用模板：
bash
vitekit my-project --template github:username/template-name
插件系统
内置插件
ViteKit CLI 包含以下内置插件：
- TypeScript 插件: 提供 TypeScript 支持
- Vue 插件: 提供 Vue 3 支持
- React 插件: 提供 React 支持
- Router 插件: 提供路由功能
- State 插件: 提供状态管理
自定义插件
创建自定义插件 my-plugin.js：
javascript
export default function myPlugin(options = {}) {
return {
name: 'my-plugin',
setup(build) {
// 插件逻辑
},
generateFiles(context) {
// 生成文件
return {
'src/my-file.ts': 'export default {}'
}
}
}
}
在配置文件中使用：
javascript
import myPlugin from './my-plugin.js'
export default {
plugins: [
myPlugin({
// 插件选项
})
]
}
高级配置
代理配置
json
{
"server": {
"proxy": {
"/api": {
"target": "http://localhost:8080",
"changeOrigin": true,
"rewrite": {
"^/api": ""
}
}
}
}
}
别名配置
json
{
"resolve": {
"alias": {
"@": "./src",
"@components": "./src/components",
"@utils": "./src/utils"
}
}
}
CSS 预处理器配置
json
{
"css": {
"preprocessorOptions": {
"scss": {
"additionalData": "@import '@/styles/variables.scss';"
},
"less": {
"modifyVars": {
"primary-color": "#1890ff"
}
}
}
}
}
配置验证
验证配置文件
bash
vitekit --validate-config
显示当前配置
bash
vitekit --show-config
重置配置
bash
vitekit --reset-config
最佳实践
团队配置
- 统一配置: 在项目中包含
vitekit.config.js - 版本控制: 将配置文件加入版本控制
- 文档说明: 为自定义配置添加注释
性能优化
- 缓存配置: 启用模板和依赖缓存
- 并行处理: 配置并行构建选项
- 按需加载: 配置代码分割
安全配置
- 环境变量: 敏感信息使用环境变量
- 权限控制: 限制模板访问权限
- 依赖检查: 定期检查依赖安全性
故障排除
配置文件不生效
- 检查文件路径和名称
- 验证 JSON 格式
- 检查权限设置
模板加载失败
- 检查模板路径
- 验证网络连接
- 检查模板格式
插件冲突
- 检查插件版本兼容性
- 调整插件加载顺序
- 禁用冲突插件