# vue-cli-sample

**Repository Path**: self-denial-cy/vue-cli-sample

## Basic Information

- **Project Name**: vue-cli-sample
- **Description**: Learn Vue Cli
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-14
- **Last Updated**: 2022-05-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vue-cli

## README

# 介绍

Vue CLI是一个基于Vue进行快速开发的完整系统，包括

- 通过`@vue/cli`实现的交互式项目脚手架
- 通过`@vue/cli`+`@vue/cli-service-global`实现的零配置原型开发
- 一个开发时依赖`@vue/cli-service`，该依赖
  - 可升级；
  - 基于webpack构建，并自带合理的默认配置
  - 可以通过项目内的配置文件进行配置
  - 可以通过插件进行扩展
- 一个丰富的官方插件集合，集成了前端生态中最好的工具
- 一套完全图形化的创建和管理Vue项目的用户界面

## 该系统的组件

### CLI

`@vue/cli`是一个全局安装的npm包，提供了终端中的vue命令

### CLI服务

`@vue/cli-service`是一个开发时依赖，局部安装在每个`@vue/cli`创建的项目中

它基于webpack和webpack-dev-server，包括

- 加载其它CLI插件的核心服务
- 一个针对绝大部分应用优化过的内部webpack配置
- 提供`serve`，`build`，`inspect`命令

### CLI插件

CLI插件是向Vue项目提供可选功能的npm包

# 基础

## 插件和Preset

### 插件

Vue CLI使用了一套基于插件的架构

当查看一个新创建项目的`package.json`文件时，就会发现依赖项大多都是以`@vue/cli-plugin-`开头的

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

在项目创建的过程中，提供的绝大部分特性都是通过插件来实现的

## CLI服务

### 使用命令

在一个Vue CLI项目中，`@vue/cli-service`安装了一个`vue-cli-service`的命令

该命令可以在 npm scripts 中以`vue-cli-service`或在终端中以`./node_modules/.bin/vue-cli-service`访问

### vue-cli-service serve

![image-20220301222645288](https://gitee.com/self-denial-cy/pictures/raw/master/PicGo/20220301222645.png)

该命令会启动一个基于 webpack-dev-server 的开发服务器并附带开箱即用的模块热重载

除了通过命令行参数，也可以通过 `vue.config.js`中 devServer 字段配置开发服务器

 命令行参数 entry 将被指定为唯一入口（默认为`src/main.js`或`src/main.ts`）

### vue-cli-service build

![image-20220301225426151](https://gitee.com/self-denial-cy/pictures/raw/master/PicGo/20220301225426.png)

### vue-cli-service inspect

![image-20220301232732674](https://gitee.com/self-denial-cy/pictures/raw/master/PicGo/20220301232732.png)

使用该命令来审查一个 Vue CLI 项目的 webpack config

### 查看所有的可用命令

有些 CLI 插件会向 `vue-cli-service`注入额外的命令

例如`@vue/cli-plugin-eslint`会注入`vue-cli-service lint`命令

```shell
// 查看所有注入的命令
npx vue-cli-service help
// 查看某个命令可用的选项
npx vue-cli-service help [command]
```

### 缓存和并行处理

- `cache-loader`会默认为 Vue、Babel、TypeScript 编译开启。文件会缓存在`node_modules/.cache`中——如果遇到编译方面问题，记得先删除缓存目录后再试试看
- `thread-loader`会在多核 CPU 的机器上为 Babel、TypeScript 转译开启

# 开发

## 浏览器兼容性

### browserslist

项目中`package.json`文件中的`browserslist`字段或一个单独的`.browserslist`文件，指定了当前项目的目标浏览器范围

这个值会被`@babel/preset-env`和`autoprefixer`解析用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀

### Polyfill

#### useBuiltIns:'usage'

一个默认的 Vue CLI 项目会使用 `@vue/babel-preset-app`，它通过`@babel/preset-env`和`browserslist`配置来决定项目中需要的 polyfill

> Vue CLI 项目启用 Babel 功能的话，会引入依赖 @vue/cli-plugin-babel
>
> 同时生成 babel.config.js 文件，默认配置中的 @vue/cli-plugin-babel/preset 就是指向 @vue/babel-preset-app

默认情况下，它会把 `useBuiltIns: 'usage'`传递给 `@babel/preset-env`

这样它会根据源代码中出现的语言特性自动检测需要的 polyfill

这确保了最终包里 polyfill 数量的最小化

然而，这也意味着如果其中有一个依赖项需要特殊的 polyfill

默认情况下 Babel 无法将其检测出来

如果有依赖项需要 polyfill：

- 如果该依赖基于一个目标环境不支持的 ES 版本：将其添加到 `vue.config.js` 中的 `transpileDependencies` 选项，这会为该依赖项同时开启语法转译和根据使用情况自动 polyfill

- 如果该依赖项交付了 ES5 代码并显式的列出了需要的 polyfill：可以使用 `@vue/babel-preset-app` 的 polyfills 选项预包含所需要的 polyfill（ es.promise 将被默认包含，因为现在的库依赖 Promise 相当普遍 ）

  ```js
  // babel.config.js
  module.exports={
    presets:[
      ['@vue/app',{
        polyfills:[
          'es.promise',
          'es.symbol'
        ]
      }]
    ]
  }
  // 这里的 @vue/app 大概或许也许可能就是指向 @vue/babel-preset-app 吧。。。
  // 反正我找了很久还是没找到说明，希望有大佬看到可以帮忙解答一下
  ```

  > 推荐以这种方式添加 polyfill 而不是在源代码中直接导入，因为如果这里列出的 polyfill 在 browserslist 的目标中原生支持，则它会被自动排除，不会重复导入

- 如果该依赖项交付 ES5 代码，但使用了 ES6+ 特性且没有显式的列出需要的 polyfill：使用 `useBuiltIns: 'entry'` 然后在入口文件添加 `import 'core-js/stable'` 和 `import 'regenerator-runtime/runtime'`。这会根据 `browserslist` 目标导入所有 polyfill ，这样就不用担心依赖的 polyfill 问题了，但是因为包含了一些没有用到的polyfill 所以最终的包大小可能会增加

#### 构建库或是 Web Component 时的 Polyfills

当使用 Vue CLI 来构建一个库或是 Web Component 时，推荐给 `@vue/babel-preset-app` 传入 `useBuiltIns: false` 选项。这能够确保当前库或是组件不包含不必要的 polyfills 。通常来说，处理 polyfills 问题应当是最终使用库或组件的应用的责任。

### 现代模式

有了 Babel 在代码中可以使用所有最新的 ES2015+ 语言特性，但也意味着最终需要交付转译和 polyfill 后的包以支持旧浏览器

这些转译后的包通常都比原生的 ES2015+ 代码更多冗长，运行更慢

现如今绝大多数现代浏览器都已经支持了原生的 ES2015，所以因为要支持更老的浏览器而为它们交付笨重的代码是一种浪费

Vue CLI 提供了 【现代模式】 以解决这个问题

```shel
vue-cli-service build --modern
```

Vue CLI 会生成应用的两个版本：一个现代版的包，面向支持 ES modules 的现代浏览器，另一个旧版本的包，面向不支持的旧浏览器

最酷的是这里没有任何特殊的部署要求：其生成的 HTML 文件：

- 现代版的包会通过 `<script type="module">` 在被支持的浏览器中加载；它们还会使用 `<link rel="modulepreload">` 进行预加载
- 旧版的包会通过 `<script nomodule>` 加载，并会被支持 ES modules 的浏览器忽略
- 一个针对 Safari 10 中 `<script nomodule>` 的修复会被自动注入

对于一个 Hello World 应用来说，现代版的包就已经小了 16%

在生产环境下，现代版的包通常都会表现出显著的解析速度和运算速度，从而改善应用的加载性能

> 传统脚本不存在跨域问题，君不见 JSONP
>
> 模块脚本可以正常访问同源脚本
>
> 但是当遇到非同源脚本时，需要在响应头配置有效的 CORS 头
>
> 诸如 `Access-Control-Allow-Origin: *`

## HTML 和静态资源

### HTML

#### Index 文件

`public/index.html` 文件是一个会被 `html-webpack-plugin` 处理的模板文件

在构建过程中，资源链接会被自动注入

另外，Vue CLI 也会自动注入 resource hint（`preload/prefetch`、`manifest`、图标链接（当用到 PWA 插件时））以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接

#### 插值

因为 index 文件被用作模板，在文件中可以使用 `lodash template` 语法插入内容：

- `<%= VALUE %>` 用来做不转义插值
- `<%- VALUE %>` 用来做 HTML 转义插值
- `<% expression %>` 用来描述 JavaScript 流程控制

除了被 `html-webpack-plugin` 暴露的默认值之外，所有的客户端环境变量也可以直接使用

- htmlWebpackPlugin
- webpackConfig
- compilation
- NODE_ENV
- BASE_URL
- VUE_APP_XXX

#### Preload

`<link rel="preload">` 是一种 resource hint ，用来指定页面加载后马上要用到的资源，所以在页面加载的过程中，在浏览器还未开始主体渲染之前就要准备好这些资源

默认情况下，一个 Vue CLI 应用会为所有初始化渲染需要的文件自动生成 preload 提示

这些提示由 `@vue/preload-webpack-plugin` 注入，并且可以通过 `chainWebpack` 的 `config.plugin('preload')` 进行修改和删除

#### Prefetch

`<link rel="prefetch">` 是一种 resource hint ，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容

默认情况下，一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件（通过动态 `import()` 按需 code splitting 的产物）自动生成 prefetch 提示

这些提示会被 `@vue/preload-webpack-plugin` 注入，并且可以通过 `chainWebpack` 的 `config.plugin('prefetch')` 进行修改和删除

```js
// vue.config.js
module.exports={
    chainWebpack: config => {
        // 移除 prefetch 插件
        config.plugins.delete('prefetch')
        
        // or
        // 修改选项
        config.plugin('prefetch').tap(options => {
            options[0].fileBlacklist = options[0].fileBlacklist || []
            // 将 about.js 这个文件加入 prefetch 黑名单
            options[0].fileBlacklist.push(/about.js$/)
            return options
        })
    }
}
```

当 prefetch 插件被禁用时，可以通过 webpack 内联注释手动指定需要开启 prefetch 的代码块

```js
import(/* webpackPrefetch: true */ './asyncComponent.vue')
// 这样开启 prefetch 的代码块不会直接在 index.html 中注入 prefetch 链接，而是在该代码块的父级区块被加载之后再注入 prefetch 链接
```

> Prefetch 链接将会消耗带宽
>
> 如果应用很大且有很多 async chunk ，而用户主要使用的是对带宽较敏感的移动端，那么建议关闭 prefetch 插件并手动指定需要 prefetch 的代码区块

#### 不生成 index

当基于已有的后端使用 Vue CLI 时，不需要生成 index.html ， 这样生成的资源可以用于一个服务端渲染的页面：

```js
// vue.config.js
module.exports={
  // 去掉文件名中的 hash
  filenameHashing: false,
  // 删除 HTML 相关的 webpack 插件
  chainWebpack: config => {
    config.plugins.delete('html')
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
  }
}
```

但是这样做并不是很推荐，因为：

- 硬编码的文件名不利于实现高效率的缓存控制
- 硬编码的文件名也无法很好的进行 code-splitting ，因为无法利用 hash 生成额外的同名 JavaScript 文件（不是很理解。。。）
- 硬编码的文件名无法在现代模式下工作（不是很理解。。。）

#### 构建一个多页应用

不是每个应用都需要是一个单页面应用，Vue CLI 支持使用 `vue.config.js` 中的  `pages` 选项构建一个多页面的应用

构建好的应用将会在不同的入口之间高效共享通用的 chunk 以获得最佳的加载性能

### 处理静态资源

静态资源可以通过两种方式进行处理：

- 在 JavaScript 中被导入（ require ）或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理
- 放在 public 目录下或通过绝对路径被引用。这类资源将会被直接拷贝，不会经过 webpack 处理

#### 从相对路径导入

当在 JavaScript、CSS 或 `*.vue` 文件中使用相对路径（必须以 `.` 开头）引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中

在编译过程中，所有诸如 `<img src="...">` 、 `background: url(...)` 和 CSS `@import` 的资源 URL 都会被解析为一个模块依赖

例如：

- `url(./image.png)` 会被翻译为 `require('./image.png')`
- `<img src="./image.png">` 会被翻译为 `h('img', { attrs: { src: require('./image.png') } })`

在内部，通过 webpack 的 Assets Modules 配置，用版本哈希值和正确的公共基础路径来决定最终的文件路径，并将小于 8KB 的资源内联，以减少 HTTP 请求的数量

通过 chainWebpack 调整内联文件的大小限制：

```js
// vue.config.js
config
    .module
    .rule("images")
    .use("url-loader")
    .loader("url-loader")
    .tap((options) => {
    	return Object.assign(options, {limit: 10 * 1024});
	});
```

#### URL 转换规则

- 如果 URL 是一个绝对路径，URL 将会被保留不变；URL 指向的静态资源不会经过 webpack 处理，会被直接拷贝（在 JavaScript 中 require 不生效）

- 如果 URL 是一个相对路径，它会作为一个模块依赖被解析；URL 指向的静态资源会经过 webpack 处理

- 如果 URL 以 `~` 开头，其后的任何内容会作为一个模块依赖被解析；这意味着甚至可以直接引用 Node 模块中的资源（在 JavaScript 中 require 不生效）

  ```html
  <img src="~some-npm-package/foo.png" />
  ```

- 如果 URL 以 `@` 开头，也会作为一个模块依赖被解析；Vue CLI 默认设置一个指向 `projectRoot/src` 的别名 `@` （在 CSS 中 `url('...')` 不生效）

#### public 文件夹

任何放置在 public 文件夹的静态资源都会被简单的拷贝，而不经过 webpack 处理；并且需要通过绝对路径来引用

推荐将资源作为模块依赖图的一部分导入，通过 webpack 处理：

- 脚本和样式表会被压缩且各自打包在一起，从而避免额外的网络请求
- 文件丢失会直接在编译阶段报错，而不是到了客户端才产生 404 错误
- 最终生成的文件名包含了内容哈希，因此不必担心浏览器的缓存问题

`public` 目录提供的是一个应急手段，当通过绝对路径引用它时，注意应用将会部署到哪里

如果应用没有部署在域名的根部，那么需要给应用配置 `publicPath` 前缀：

- 在 `public/index.html` 或其它通过 `html-webpack-plugin` 用作模板的 HTML 文件中，需要通过 `<%= BASE_URL %>` 设置链接前缀：

  ```html
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  ```

- 在 `*.vue` 文件中，首先需要：

  ```js
  data(){
      return {
          publicPath: process.env.BASE_URL
      }
  }
  ```

  然后：

  ```html
  <img :src="`${publicPath}my-image.png`">
  ```

#### 何时使用 public 文件夹

- 需要在构建输出中指定一个文件名字（不能有 hash 也不能被内联）
- 有上千个图片，需要动态引用它们的路径
- 有些库可能和 webpack 不兼容，除了通过独立的 `script` 标签引入别无他法

## CSS 相关

Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器

### 引用静态资源

所有编译后的 CSS 都会通过 css-loader 来解析其中的 `url()` 引用，并将这些引用作为模块请求来处理

这意味着可以根据本地的文件结构用相对路径引用静态资源

> 注意：如果想要引用一个 npm 依赖中的文件，或是想要使用 webpack alias，要在引用路径前加上 `~` 的前缀来避免歧义
>
> 总结：想要引用 npm 依赖中的文件或想要使用 webpack alias，一出问题就加 `~` 就完了

### 预处理器

在创建 Vue CLI 项目的时候可以选择预处理器（Sass/Less/Stylus）

如果当时没有选好，内置的 webpack 仍然会被预设值为可以完成所有的处理，后续只需要手动安装对应的 webpack loader 即可：

```shell
# Sass
npm i -D sass-loader sass

# Less
npm i -D less-loader less

# Stylus
npm i -D stylus-loader stylus
```

之后项目就支持导入相应的文件类型，或在 `*.vue` 文件中使用

### PostCSS

Vue CLI 内部使用了 PostCSS

在 Vue CLI 项目中可以通过 PostCSS 配置文件或通过 `vue.config.js` 的 `css.loaderOptions.postcss` 配置 postcss-loader （间接传递配置参数给 PostCSS）来配置 PostCSS

Vue CLI 项目中默认集成了 PostCSS 插件 autoprefixer；

如果要配置目标浏览器，可以使用 `package.json` 的 browserslist 字段

> 在生产环境构建中，Vue CLI 会优化 CSS 并基于目标浏览器抛弃不必要的浏览器前缀规则
>
> 因为默认集成了 autoprefixer，只需要使用无前缀的 CSS 规则，不需要考虑 CSS 规则在不同浏览器中的兼容问题

> PostCSS 是一个处理样式的工具包，可以集成各种不同的插件，接受不同的语法规则；PostCSS 处理一个 CSS 文件并暴露了一个 API 来分析，之后可以被各种插件处理，并根据指定的语法规则决定最终输出
>
> postcss-loader 为 PostCSS 和 webpack 之间架起了桥梁，让 webpack 可以使用 PostCSS 来处理样式；postcss-loader 接收的参数一部分是传递给 PostCSS 使用的，之后 PostCSS 输出内容传递给 postcss-loader 再经由 postcss-loader 传递给下一个 loader
>
> autoprefixer 是 PostCSS 的可使用插件之一，添加了 vendor 浏览器前缀，它使用 Can I Use 的数据

### CSS Modules

通过 `<style module>` 以开箱即用的方式在 `*.vue` 文件中使用 CSS Modules

如果想在 JavaScript 中作为 CSS Modules 导入 CSS 或其它预处理文件，该文件应该以 `.module.(css|less|sass|scss|styl)` 结尾：

```js
import styles from './foo.module.css'
import lessStyles from './foo.module.less'
```

如果想去掉文件名中的 `.module` ，可以如下设置：

```js
// vue.config.js
module.exports={
    css:{
        requireModuleExtension: false
    }
}
```

> 个人觉得没必要，最好把 CSS Modules 类型和普通类型的样式表文件区分开来

### 向预处理器 Loader 传递选项

有时候想要向 webpack 的预处理器 loader 传递选项

比如向所有 Sass/Less 样式传入共享的全局变量：

```js
// vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            sass: {
                additionalData: `@import "~@/variables.sass"`
            },
            // 默认情况下 sass 选项同时对 sass 和 scss 生效
            // 因为 scss 语法在内部也是由 sass-loader 处理的
            // 但是配置 additionalData/prependData 选项时
            // scss 语法要求语句结尾必须有分号 sass 语法则要求必须没有分号
            // 因此可以使用 scss 选项单独配置
            scss: {
                additionalData: `@import "~@/variables.scss";`
            },
            // 给 less-loader 传递选项
            less: {
                globalVars: {
                    primary: '#fff'
                }
            }
        }
    }
}
```

> 注意：
>
> 这样做比使用 chainWebpack 手动指定 loader 更推荐，因为这些选项需要应用在使用了相应 loader 的多个地方

## webpack 相关

### 简单的配置方式

调整 webpack 配置最简单的方式就是在 `vue.config.js` 中的 `configureWebpack` 选项提供一个对象

```js
// vue.config.js
module.exports={
    configureWebpack:{
        // ...
    }
}
```

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

> 注意：
>
> 有些 webpack 选项是基于 `vue.config.js` 中的值设置的，所以不能直接修改
>
> 比如应该修改 `vue.config.js` 中的 `outputDir` 选项而不是修改 `output.path` 
>
> 比如应该修改 `vue.config.js` 中的 `publicPath` 选项而不是修改 `output.publicPath`
>
> 因为 `vue.config.js` 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作

如果需要基于运行环境有条件的配置行为，或者想要直接修改配置，那就换成一个函数（该函数会在环境变量被设置之后懒执行）

该方法的第一个参数会收到已经解析好的配置

在函数内，可以直接修改配置，或者返回一个将会被合并的对象：

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

### 链式操作（高级）

Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的

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

> 当打算链式访问特定的 loader 选项时，vue inspect 会非常有帮助

```js
// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.module.rule('vue').use('vue-loader').tap(options => {
            // 修改选项
            return options
        })
    }
}
```

> 对于 CSS 相关 loader 来说，推荐使用 css.loaderOptions 而不是直接链式指定 loader
>
> 因为每种 CSS 文件类型都有多个规则，而 css.loaderOptions 可以确保通过一个地方影响所有的规则

通过查阅 [webpack-chain](https://github.com/neutrinojs/webpack-chain/tree/v6) 文档熟悉 API；

通过工具 `vue inspect` 来确认 Vue CLI 内部 webpack 配置对象的变更；

### 审查项目的 webpack 配置

`vue-cli-service` 暴露了 `inspect` 命令用于审查解析好的 webpack 配置

全局的 `vue` 可执行程序也提供了 `inspect` 命令，在项目中两者功能一致

该命令会将解析出来的 webpack 配置，包括链式访问规则和插件的提示打印到 stdout

```shell
vue inspect > output.js
## 重定向输出到文件中以便进行查阅
## 输出的并不是一个有效的 webpack 配置文件，而是一个用于审查的被序列化的格式

# 只审查第一条规则
vue inspect module.rules.0
# 指定审查规则或插件
vue inspect --rule vue
vue inspect --plugin html
# 列出所有规则和插件名字
vue inspect --rules
vue inspect --plugins
```

### 以一个文件的方式使用解析好的配置

有些外部工具可能需要通过一个文件访问解析好的 webpack 配置，比如那些需要提供 webpack 配置路径的 IDE 或 CLI：

```shell
<projectRoot>/node_modules/@vue/cli-service/webpack.config.js
```

该文件会动态解析并输出 `vue-cli-service` 命令中使用的相同的 webpack 配置，包括那些来自插件甚至是自定义的配置

## 模式和环境变量

### 模式

默认情况下，一个 Vue CLI 项目有三种模式：

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

通过传递 `--mode` 选项参数可以为命令覆写默认的模式：

```shell
vue-cli-service build --mode development
```

当运行 `vue-cli-service` 命令时，所有的环境变量都会试图从环境文件中载入

如果环境文件中不包含 `NODE_ENV` 变量，该值就会取决于模式：

- `production` 模式下被设置为 `production`
- `test` 模式下被设置为 `test`
- 其它情况则被设置为 `development`

`NODE_ENV` 将决定应用的运行模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置

> NODE_ENV
>
> 如果在环境中有默认的 `NODE_ENV` ，应该移除它或在运行 `vue-cli-service` 命令之前明确地设置 `NODE_ENV`
>
> `NODE_ENV` 首先试图从环境变量中获取，其次从环境文件中获取，然后根据模式决定，最终依旧未匹配到就是 `development`

### 环境变量

在项目根目录中可以配置以下环境文件来指定环境变量：

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

环境文件中只包含环境变量的键值对：

```shell
FOO = bar
VUE_APP_NOT_SECRET_CODE = some_value
```

> 警告
>
> 不要在应用程序中存储任何机密信息（例如私有 API 密钥）
>
> 环境文件中的环境变量会随着构建打包嵌入到输出代码中，意味着任何人都有机会能够看到它
>
> 只有 `NODE_ENV`  `BASE_URL` 和以 `VUE_APP_` 开头的环境变量将通过 `webpack.DefinePlugin` 静态地嵌入到客户端侧的代码中
>
> 这是为了避免意外公开机器上可能具有相同名称的私钥

被载入的环境变量将会对 `vue-cli-service` 的所有命令、插件和依赖可用（毕竟基于同一个 Node 进程）

> 环境文件加载优先级
>
> 为一个特定模式准备的环境文件（例如 `.env.production` ）将会比一般的环境文件（例如 `.env` ）拥有更高优先级
>
> 带有 `.local` 后缀的环境文件比一般的环境文件拥有更高优先级
>
> 此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被环境文件覆写
>
> 环境文件是通过运行 `vue-cli-service` 命令载入的，因此环境文件发生变更，需要重新运行命令

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

只有以 `VUE_APP_` 开头的环境变量会被 `webpack.DefinePlugin` 静态地嵌入到客户端侧的包中：

```js
console.log(process.env.VUE_APP_SECRET)
```

在构建过程中， `process.env.VUE_APP_SECRET` 将会被相应的环境变量的值所替换

除了 `VUE_APP_^` 变量外，应用程序中始终可用的还有两个特殊的变量：

- `NODE_ENV` 首先尝试从环境变量中获取，再尝试从环境文件中加载，然后根据模式进行匹配，最终默认为 `development`
- `BASE_URL` 在客户端侧的代码中始终与 `vue.config.js` 中的 `publicPath` 选项一致，即应用会部署到的基础路径

所有解析出来的环境变量都可以在 `public/index.html` 中使用

> 提示
>
> 在 `vue.config.js` 文件中可以计算环境变量，想要在客户端侧代码中使用，仍然需要以 `VUE_APP_` 前缀开头：
>
> ```js
> process.env.VUE_APP_VERSION = require('./package.json').version
> 
> module.exports = {
>   // config
> }
> ```

## 构建目标

当运行 `vue-cli-service build` 时，可以通过 `--target` 选项指定不同的构建目标，支持将相同的源代码根据不同的用例生成不同的构建

### 应用

应用模式是默认的模式，在该模式中：

- `index.html` 会带有自动注入的资源链接和 `resource hint`
- 第三方库会被分发到一个独立的文件中以便更好的缓存
- 小于 `8KiB` 的静态资源会被内联在 JavaScript 中
- `public` 中的静态资源会被直接拷贝到输出目录中

### [库](https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93)（似懂非懂，有推荐的教程麻烦 Cue 我）

### [Web Components 组件](https://cli.vuejs.org/zh/guide/build-targets.html#web-components-%E7%BB%84%E4%BB%B6)（尚未接触）

### [在构建时使用 vuex](https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BC%82%E6%AD%A5-web-components-%E7%BB%84%E4%BB%B6)（同上）

## [部署](https://cli.vuejs.org/zh/guide/deployment.html#%E9%83%A8%E7%BD%B2)