0
# Configuration Management
1

2
CLI configuration, preset management, and project settings for Vue CLI global and project-specific options.
3

4
## Capabilities
5

6
### Config Command
7

8
Inspect and modify Vue CLI global configuration stored in ~/.vuerc.
9

10
```bash { .api }
11
/**
12
 * Inspect and modify the CLI configuration
13
 * @param value - Optional value to set or get
14
 */
15
vue config [value]
16

17
Options:
18
  -g, --get <path>               Get value from configuration option
19
  -s, --set <path> <value>       Set configuration option value  
20
  -d, --delete <path>            Delete option from configuration
21
  -e, --edit                     Open configuration with default editor
22
  --json                         Output JSON result only
23
```
24

25
**Usage Examples:**
26

27
```bash
28
# View entire configuration
29
vue config
30

31
# Get specific configuration value
32
vue config -g packageManager
33

34
# Set configuration value
35
vue config -s packageManager yarn
36

37
# Set nested configuration value
38
vue config -s "presets.my-preset.useConfigFiles" true
39

40
# Delete configuration option
41
vue config -d packageManager
42

43
# Edit configuration in default editor
44
vue config -e
45

46
# Output configuration as JSON
47
vue config --json
48
```
49

50
### Config Function (Programmatic)
51

52
Programmatic interface for configuration management.
53

54
```typescript { .api }
55
/**
56
 * Manage CLI configuration programmatically
57
 * @param value - Configuration value to set
58
 * @param options - Configuration operation options
59
 */
60
async function config(value?: string, options?: ConfigOptions): Promise<void>;
61

62
interface ConfigOptions {
63
  /** Get value from configuration path */
64
  get?: string;
65
  /** Set configuration path to value */
66
  set?: string;
67
  /** Delete configuration path */
68
  delete?: string;
69
  /** Open configuration in editor */
70
  edit?: boolean;
71
  /** Output as JSON only */
72
  json?: boolean;
73
}
74
```
75

76
**Usage Examples:**
77

78
```typescript
79
import { config } from "@vue/cli";
80

81
// Get configuration value
82
await config(undefined, { get: 'packageManager' });
83

84
// Set configuration value
85
await config('yarn', { set: 'packageManager' });
86

87
// Delete configuration
88
await config(undefined, { delete: 'packageManager' });
89
```
90

91
### Configuration Options
92

93
Global CLI configuration options available in ~/.vuerc.
94

95
```typescript { .api }
96
/**
97
 * Vue CLI configuration structure
98
 */
99
interface VueCliConfig {
100
  /** Default package manager (npm, yarn, pnpm) */
101
  packageManager?: 'npm' | 'yarn' | 'pnpm';
102
  /** Use Taobao npm registry (China) */
103
  useTaobaoRegistry?: boolean;
104
  /** Saved project presets */
105
  presets?: Record<string, Preset>;
106
  /** Default preset name */
107
  defaultPreset?: string;
108
  /** Disable CLI version check */
109
  skipVersionCheck?: boolean;
110
  /** Plugin options */
111
  plugins?: Record<string, any>;
112
}
113

114
/**
115
 * Default configuration values
116
 */
117
const defaultConfig: VueCliConfig = {
118
  packageManager: 'npm',
119
  useTaobaoRegistry: false,
120
  presets: {},
121
  skipVersionCheck: false
122
};
123
```
124

125
### Preset Management
126

127
Save, load, and manage project presets for reusable configurations.
128

129
```typescript { .api }
130
/**
131
 * Load Vue CLI options from ~/.vuerc
132
 * @returns Current CLI configuration
133
 */
134
function loadOptions(): VueCliConfig;
135

136
/**
137
 * Save Vue CLI options to ~/.vuerc
138
 * @param toSave - Configuration object to save
139
 */
140
function saveOptions(toSave: Partial<VueCliConfig>): void;
141

142
/**
143
 * Save a project preset to global configuration
144
 * @param name - Preset name
145
 * @param preset - Preset configuration
146
 */
147
function savePreset(name: string, preset: Preset): void;
148

149
/**
150
 * Validate preset configuration
151
 * @param preset - Preset to validate
152
 * @returns Validation result
153
 */
154
function validatePreset(preset: Preset): ValidationResult;
155

156
/**
157
 * Get RC file path
158
 * @returns Path to ~/.vuerc file
159
 */
160
function rcPath(): string;
161
```
162

163
**Usage Examples:**
164

165
```typescript
166
import { loadOptions, saveOptions, savePreset } from "@vue/cli";
167

168
// Load current configuration
169
const config = loadOptions();
170

171
// Update package manager preference
172
saveOptions({
173
  packageManager: 'yarn',
174
  useTaobaoRegistry: false
175
});
176

177
// Save custom preset
178
savePreset('my-preset', {
179
  useConfigFiles: true,
180
  plugins: {
181
    '@vue/cli-plugin-router': {},
182
    '@vue/cli-plugin-vuex': {},
183
    '@vue/cli-plugin-typescript': {
184
      classComponent: false
185
    }
186
  },
187
  cssPreprocessor: 'sass'
188
});
189
```
190

191
### Project Configuration
192

193
Project-specific configuration through vue.config.js.
194

195
```typescript { .api }
196
/**
197
 * Vue project configuration (vue.config.js)
198
 * Note: This is for vue-cli-service, but managed through CLI tools
199
 */
200
interface ProjectConfig {
201
  /** Public path for deployed assets */
202
  publicPath?: string;
203
  /** Output directory for build */
204
  outputDir?: string;
205
  /** Directory for static assets */
206
  assetsDir?: string;
207
  /** Filename for generated index.html */
208
  indexPath?: string;
209
  /** Generate source maps for production builds */
210
  productionSourceMap?: boolean;
211
  /** Configure webpack-dev-server */
212
  devServer?: DevServerConfig;
213
  /** Configure webpack */
214
  configureWebpack?: WebpackConfig | ((config: WebpackConfig) => void);
215
  /** Configure webpack via webpack-chain */
216
  chainWebpack?: (config: WebpackChainConfig) => void;
217
  /** Configure CSS processing */
218
  css?: CSSConfig;
219
  /** Configure PWA plugin */
220
  pwa?: PWAConfig;
221
  /** Configure plugin options */
222
  pluginOptions?: Record<string, any>;
223
}
224
```
225

226
### Configuration File Transforms
227

228
How configuration files are extracted and managed.
229

230
```typescript { .api }
231
/**
232
 * Configuration transform system for extracting configs from package.json
233
 */
234
interface ConfigTransforms {
235
  /** Babel configuration */
236
  babel: ConfigTransform;
237
  /** PostCSS configuration */
238
  postcss: ConfigTransform;
239
  /** ESLint configuration */
240
  eslintConfig: ConfigTransform;
241
  /** Jest configuration */
242
  jest: ConfigTransform;
243
  /** Browserslist configuration */
244
  browserslist: ConfigTransform;
245
  /** lint-staged configuration */
246
  "lint-staged": ConfigTransform;
247
}
248

249
/**
250
 * File types and their possible filenames for config extraction
251
 */
252
interface FileDescriptor {
253
  /** JavaScript config files */
254
  js?: string[];
255
  /** JSON config files */
256
  json?: string[];
257
  /** YAML config files */
258
  yaml?: string[];
259
  /** Line-based config files */
260
  lines?: string[];
261
}
262

263
/**
264
 * Default file descriptors for common configurations:
265
 */
266
const defaultConfigFiles = {
267
  babel: {
268
    js: ['babel.config.js', '.babelrc.js'],
269
    json: ['.babelrc', '.babelrc.json']
270
  },
271
  eslintConfig: {
272
    js: ['.eslintrc.js'],
273
    json: ['.eslintrc.json', '.eslintrc'],
274
    yaml: ['.eslintrc.yaml', '.eslintrc.yml']
275
  },
276
  jest: {
277
    js: ['jest.config.js'],
278
    json: ['jest.config.json']
279
  },
280
  postcss: {
281
    js: ['postcss.config.js'],
282
    json: ['.postcssrc.json', '.postcssrc']
283
  },
284
  browserslist: {
285
    lines: ['.browserslistrc']
286
  }
287
};
288
```
289

290
### Registry Configuration
291

292
NPM registry configuration and detection.
293

294
```typescript { .api }
295
/**
296
 * Registry detection and configuration utilities
297
 */
298

299
/**
300
 * Detect if Taobao registry should be used (for users in China)
301
 * @returns Whether to use Taobao registry
302
 */
303
function shouldUseTaobao(): boolean;
304

305
/**
306
 * Get appropriate registry URL based on location and configuration
307
 * @returns Registry URL to use
308
 */
309
function getRegistry(): string;
310

311
/**
312
 * Registry URLs:
313
 */
314
const registries = {
315
  npm: 'https://registry.npmjs.org/',
316
  yarn: 'https://registry.yarnpkg.com/',
317
  taobao: 'https://registry.npm.taobao.org/',
318
  cnpm: 'https://r.cnpmjs.org/'
319
};
320
```
321

322
### Environment Configuration
323

324
Environment variable and runtime configuration management.
325

326
```typescript { .api }
327
/**
328
 * Environment variables that affect Vue CLI behavior:
329
 * 
330
 * VUE_CLI_DEBUG - Enable debug logging
331
 * VUE_CLI_SKIP_DIRTY_GIT_PROMPT - Skip git dirty check
332
 * VUE_CLI_SKIP_WRITE - Skip file writing (for testing)
333
 * VUE_CLI_TEST - Enable test mode
334
 * VUE_CLI_CONTEXT - Override project context path
335
 * VUE_CLI_SERVICE_CONFIG_PATH - Override service config path
336
 * HTTP_PROXY/HTTPS_PROXY - Proxy settings for package installation
337
 * NPM_CONFIG_REGISTRY - Override npm registry
338
 */
339

340
/**
341
 * Runtime configuration detection
342
 */
343
interface RuntimeConfig {
344
  /** Is running in debug mode */
345
  isDebug: boolean;
346
  /** Is running in test mode */
347
  isTest: boolean;
348
  /** Skip git dirty check */
349
  skipDirtyGitPrompt: boolean;
350
  /** Skip file writing */
351
  skipWrite: boolean;
352
  /** Custom context path */
353
  context?: string;
354
  /** Custom service config path */
355
  serviceConfigPath?: string;
356
}
357
```
358

359
### Configuration Validation
360

361
Validation utilities for configuration objects.
362

363
```typescript { .api }
364
/**
365
 * Validation result structure
366
 */
367
interface ValidationResult {
368
  /** Whether validation passed */
369
  valid: boolean;
370
  /** Validation error messages */
371
  errors: string[];
372
  /** Validation warnings */
373
  warnings: string[];
374
}
375

376
/**
377
 * Validate preset configuration
378
 * @param preset - Preset to validate
379
 * @returns Validation result with errors and warnings
380
 */
381
function validatePreset(preset: Preset): ValidationResult;
382

383
/**
384
 * Validate package manager choice
385
 * @param packageManager - Package manager name
386
 * @returns Whether package manager is valid
387
 */
388
function validatePackageManager(packageManager: string): boolean;
389

390
/**
391
 * Common validation rules:
392
 * - Plugin names must be valid npm package names
393
 * - Version ranges must be valid semver
394
 * - CSS preprocessor must be supported option
395
 * - Package manager must be npm, yarn, or pnpm
396
 * - Preset names cannot conflict with built-in presets
397
 */
398
```