用 Vue CLI 创建项目时的配置选项说明

Vue CLI 创建项目时的配置选项主要分为项目配置、功能插件配置和构建优化配置，通过命令行参数或配置文件（如vue.config.js）设置，影响项目初始化、开发环境及生产构建过程。以下是详细说明：

一、基础项目配置选项

--default
作用：使用 Vue CLI 预设的默认配置快速生成项目。
场景：适合初学者或简单项目，默认包含 Babel、ESLint 和基础 Webpack 配置。
示例：vue create my-project --default
--preset
作用：通过预设配置文件（如自定义或官方提供的@vue/cli-init）复用配置。
场景：团队开发中统一项目结构，避免重复配置。
示例：vue create my-project --preset my-custom-preset
--inlinePreset `
作用：直接通过 JSON 字符串定义预设配置，无需外部文件。
场景：快速测试特定配置组合。
示例：vue create my-project --inlinePreset '{"useConfigFiles": false}'

二、功能插件配置选项

代码转换与语法支持
--babel
作用：启用 Babel 转译 ES6+ 语法，兼容旧浏览器。
依赖：自动安装@vue/babel-preset-app。
示例：vue create my-project --babel
--typescript
作用：添加 TypeScript 支持，包括类型检查和装饰器语法。
依赖：安装typescript、@vue/cli-plugin-typescript等。
示例：vue create my-project --typescript
CSS 预处理器与工具
--css `
作用：选择 CSS 预处理器（支持scss/sass/less/stylus）。
依赖：根据选择安装对应 loader（如sass-loader）。
示例：vue create my-project --css=scss
--cssPreprocessor `
作用：自定义预处理器配置（如全局变量、混入等）。
场景：需通过vue.config.js进一步配置css.loaderOptions。
状态管理与路由
--vuex
作用：添加 Vuex 进行集中式状态管理。
结构：生成store/index.js基础模板。
示例：vue create my-project --vuex
--router
作用：添加 Vue Router 进行页面路由管理。
选项：支持history模式（需后端配置）或默认哈希模式。
示例：vue create my-project --router --routerHistoryMode
测试工具
--unit `
作用：选择单元测试框架（支持mocha/jest）。
依赖：安装对应测试库和断言库（如chai）。
示例：vue create my-project --unit=jest
--e2e `
作用：选择端到端测试工具（支持cypress/nightwatch）。
示例：vue create my-project --e2e=cypress

三、构建与开发配置选项

开发服务器配置
--host ` / --port
作用：指定开发服务器地址和端口（默认localhost:8080）。
示例：vue create my-project --host 0.0.0.0 --port 3000
--https
作用：启用 HTTPS 开发服务器（需本地证书）。
场景：测试 HTTPS 特定功能（如地理定位）。
构建优化选项
--lintOnSave `
作用：控制 ESLint 保存时检查（true/false/error）。
示例：vue create my-project --lintOnSave=error
--productionSourceMap
作用：生产环境是否生成 Source Map（默认true，建议关闭以减小体积）。
配置：通过vue.config.js的productionSourceMap覆盖。
--configureWebpack / --chainWebpack
作用：直接修改 Webpack 配置（对象形式或链式操作）。
示例：// vue.config.jsmodule.exports = { configureWebpack: { optimization: { splitChunks: { minSize: 10000 } } }}

四、高级用法与插件扩展

插件系统
作用：通过@vue/cli-plugin-*扩展功能（如 PWA、GraphQL）。
示例：vue add @vue/pwa # 添加 PWA 支持vue add vue-i18n # 添加国际化
图形化界面
命令：vue ui
作用：通过可视化界面管理项目配置、依赖和任务。

五、常见错误与调试

依赖缺失
现象：如启用--css=scss但未安装sass-loader。
解决：手动安装依赖：npm install sass-loader sass --save-dev
配置冲突
现象：手动修改vue.config.js后构建失败。
解决：检查配置是否覆盖默认值（如publicPath冲突）。
端口占用
解决：终止占用端口的进程或更换端口：lsof -i :8080 # Mac/Linux 查找进程taskkill /F /PID <pid> # Windows 终止进程

六、性能优化建议

通过合理配置这些选项，可显著提升开发效率和项目性能，同时适应不同规模的应用需求。

热门标签