Vue CLI

官网指南

一. 版本

旧版本(1.x或2.x) 包名为vue-cli (GitHub文档官方说明已弃用)

新版本包名为@vue/cli , 从3.x开始
3.x
2019-05-01 4.x 推荐Node.js v10版本以上
2020-12-14 5.x

二. 结构

官网所说,Vue CLI有几个独立的部分
    1. CLI(@vue/cli)  
    2. CLI服务(@vue/cli-service)  
    3. CLI插件  
        Vue CLI插件的名字格式一般为:  
           1. @vue/cli-plugin-内建插件  
           2.  vue-cli-plugin-社区插件  
        在项目内部运行vue-cli-service命令时,它会自动解析并加载package.json中列出的所有CLI插件

三. 插件和Preset

插件

插件可以修改webpack的内部配置,也可以向vue-cli-service注入命令

Preset

一个 Vue CLI preset 是一个包含创建新项目所需预定义选项和插件的 JSON 对象

在 vue create 过程中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc)。你可以通过直接编辑这个文件来调整、添加、删除保存好的 preset。

一个preset的示例

{
  "useConfigFiles": true,
  "cssPreprocessor": "sass",
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb",
      "lintOn": ["save", "commit"]
    },
    "@vue/cli-plugin-router": {},
    "@vue/cli-plugin-vuex": {}
  }
}

四.CLI服务

使用命令

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

这是你使用默认 preset 的项目的 package.json：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

vue-cli-service serve

用法：vue-cli-service serve [options] [entry]

选项：

  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值：development)
  --host    指定 host (默认值：0.0.0.0)
  --port    指定 port (默认值：8080)
  --https   使用 https (默认值：false)

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

除了通过命令行参数，你也可以使用 vue.config.js 里的 devServer 字段配置开发服务器。

命令行参数 [entry] 将被指定为唯一入口 (默认值：src/main.js，TypeScript 项目则为 src/main.ts)，而非额外的追加入口。尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误。

查看所有的可用命令

有些 CLI 插件会向 vue-cli-service 注入额外的命令。例如 @vue/cli-plugin-eslint 会注入 vue-cli-service lint 命令。你可以运行以下命令查看所有注入的命令：

npx vue-cli-service help

也可以这样学习每个命令可用的选项：

npx vue-cli-service help [command]

五.开发

浏览器兼容

browserslist

1.package.json 文件里的 browserslist 字段
2. 或一个单独的 .browserslistrc 文件
指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

现在查阅这里了解如何指定浏览器范围。

webpack相关

简单的配置方式

最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

该对象将会被 webpack-merge 合并入最终的 webpack 配置。

如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象：

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

模式和环境变量

模式

默认三个模式 :

1. development 模式 - 用于 vue-cli-service serve
2. test 模式 - 用于 vue-cli-service test:unit
3. production 模式 - 用于 vue-cli-service build

覆写默认的模式 — 传递 --mode

// 在build命令中使用 development环境变量
vue-cli-service build --mode  development

当运行 vue-cli-service 时 , 所有的环境变量都从对应的环境文件中载入

1. NODE_ENV 变量的值 (有1则忽略2)
2. 如果文件内部不包含NODE_ENV 变量(即没有1) , 它的值将取决于模式
   • production 模式(即 build )下 , NODE_ENV = "production"
   • development (即 serve ) 和 test (即 test ) 模式下 , NODE_ENV = "development"

环境变量

在项目根目录中 , 可以放置下列文件 , 指定环境变量

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

🍟🍔🍕🍟只有以下开头的变量 , 会通过 `webpack.DefinePlugin`静态地嵌入到客户端侧的代码中 
1. NODE_ENV 
2. BASE_URL 
3. VUE_APP_

想要了解解析环境文件规则的细节，请参考 dotenv。我们也使用 dotenv-expand 来实现变量扩展 (Vue CLI 3.5+ 支持)。

环境文件加载优先级

1. 为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
2. Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。

官方示例 : 自定义 Staging 模式

根目录下 , 有

• .env 文件

VUE_APP_TITLE = My App

• .env.staging 文件

NODE_ENV = production
VUE_APP_TITLE = My App (staging)

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

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

这两种情况下，根据 NODE_ENV，构建出的应用都是生产环境应用，但是在 staging 版本中，process.env.VUE_APP_TITLE 被覆写成了另一个值。

在客户端侧代码中使用环境变量

代码中这样访问环境变量

process.env.VUE_APP_***
process.env.NODE_ENV
process.env.BASE_URL

• NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。
• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

只在本地有效的变量

不应该提交到代码仓库的变量

用 `.env.local` 或 `.env.[mode].local` 文件取而代之

示例 : 自定义 sit 和 uat 模式

根目录下

• .env.development文件

NODE_ENV = development   
VUE_APP_TITLE = 1

• .env.sit文件

NODE_ENV = sit
VUE_APP_TITLE = 2

• .env.uat文件

NODE_ENV = uat
VUE_APP_TITLE = 3

• package.json文件

  "scripts": {
    "serve": "vue-cli-service serve",
    "serve:sit": "vue-cli-service serve --mode sit",
    "serve:uat": "vue-cli-service serve --mode uat",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

• index.js文件

console.log(process.env.VUE_APP_TITLE);
console.log(process.env.NODE_ENV);

// 执行不同模式的命令行命令 , 以上代码打印的值不同

或者

• 直接在 .env.development 中写 , 只是每次切换需要手动处理注释

# dev
NODE_ENV = dev

# sit
# NODE_ENV = sit

# uat
# NODE_ENV = uat

• 这样 , package.json 只需要有serve即可

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

构建目标 (运行vue-cli-service build)