vue系列-vue-cli

发表于 2021-04-21 更新于 2021-05-07 分类于前端， vue

本文字数： 3.2k 阅读时长 ≈ 5 分钟

基础

单个文件开发

只适用于快速原型开发。

需要安装全局扩展 @vue/cli-service-global，开发环境得不到一致性的保证：

npm install -g @vue/cli-service-global

vue serve

Usage: serve [options] [entry]

在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器

Options:

  -o, --open  打开浏览器
  -c, --copy  将本地 URL 复制到剪切板
  -h, --help  输出用法信息

vue serve 使用了和 vue create 创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。你也可以显式地指定入口文件：

vue serve MyComponent.vue

如果需要，你还可以提供一个 index.html、package.json、安装并使用本地依赖、甚至通过相应的配置文件配置 Babel、PostCSS 和 ESLint。

vue build

Usage: build [options] [entry]

在生产环境模式下零配置构建一个 .js 或 .vue 文件

Options:

  -t, --target <target>  构建目标 (app | lib | wc | wc-async, 默认值：app)
  -n, --name <name>      库的名字或 Web Components 组件的名字 (默认值：入口文件名)
  -d, --dest <dir>       输出目录 (默认值：dist)
  -h, --help             输出用法信息

你也可以使用 vue build 将目标文件构建成一个生产环境的包并用来部署：

vue build MyComponent.vue

vue build 也提供了将组件构建成为一个库或一个 Web Components 组件的能力。

项目开发

vue create

用法：create [options] <app-name>

创建一个由 `vue-cli-service` 提供支持的新项目

选项：

  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

vue ui

以图形化界面创建和管理项目。

开发

审查项目配置

获得 vue-cli 搭建的 vue 项目的所有配置，可以使用 inspect 命令进行审查解析好的 webpack 配置。

在项目目录下的命令行中运行 npx vue inspect > output.js ，将解析出来的 webpack 配置、包括链式访问规则和插件的提示输出到 output 文件中。

只审查部分配置：

# 只审查第一条规则
vue inspect module.rules.0
# 审查一个规则
vue inspect --rule vue
# 审查一个插件名字
vue inspect --plugin html
# 审查所有的规则
vue inspect --rules
# 审查所有的插件
vue inspect --plugins

修改配置

vue-cli@v3+ 使用 webpack-chain 插件将 webpack 配置封装了，相对于之前的版本少了 config 配置文件夹，但是如果想要修改默认配置，需要创建 vue.config.js 文件来修改默认配置，该文件需要在项目根目录下，编译 vue 项目时 @vue/cli-service 会自动加载 vue.config.js 文件。

webpack-chain 提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。

中文文档：https://github.com/Yatoo2018/webpack-chain/tree/zh-cmn-Hans

@vue/cli-service 对 webpack 配置进行了抽象，但是提供了一些基础的配置入口，可以在 vue.config.js 中覆盖或合并默认配置。

具体配置内容在 <projectRoot>/node_modules/@vue/cli-service/webpack.config.js。可以使用 vue inspect 进行审查部分配置。

模式

设置模式可以在 npm scripts 中设置，如：

vue-cli-service build --mode development # 表示 build 采用development模式

development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

环境文件中的 NODE_ENV 属性值会覆盖命令行中的mode

环境变量

使用环境变量文件进行环境变量赋值。

vue-cli-service build 会加载可能存在的 .env、.env.production 和 .env.production.local 文件然后构建出生产环境应用。
vue-cli-service build --mode staging 会在 staging 模式下加载可能存在的 .env、.env.staging 和 .env.staging.local 文件然后构建出生产环境应用。

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

环境文件写法

NODE_EVN=production
VUE_APP_NOT_SECRET_CODE=some_value

为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。

.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务。

优化

vue-cli 已经内置了 optimization 选项，大部分优化问题已经被处理了，需要优化更多的细节。

合理的 polyfill
vue-cli 会帮我们进行资源的preload 和 prefetch，所以如果不需要进行 prefetch 则可以取消 vue-cli 中的设置。
```
config.plugins.delete('prefetch');
```
preload：用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload。

prefetch：用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。

可能会引发一系列问题参考：🤔记一个 prefetch 疑问及分析过程
第三方库使用 CDN 加载，进行 external 。
路由懒加载