vue-cli

vue-cli 是 vue 项目的构建工具，今天闲来无事，翻看了 vue-cli 的开发指南，受益匪浅。相对于之前潦草的使用，我的关于 vue-cli 的一些疑惑，有些得到了解答

一、引用图片

无论是使用普通路径引用图片，还是使用@、~ 路径这种使用特殊路径方式引用图片
其内部的工作方式都是使用 require() 引入图片
所以在代码中 require() 图片，和实际上设置图片的 url 的方式是一致的

二、process.env

process 是 node 环境下的全局变量，而直接访问其参数 process.env ，是可以直接访问系统环境变量的（这里的系统，不是指浏览器，而是操作系统，流行的操作系统设置环境变量大都不一样）
webpack 是运行在 node 环境下的，所以可以直接访问这个参数。而 vue-cli 是基于 webpack 的二次开发，实际上我们在编写 vue 项目时，都能直接访问这个参数
注意我们编写的这些文件，是运行在 node 环境下的，最终是通过 webpack 打包成浏览器环境下的代码的。所以，在编写代码的时候，我们可以访问 process.env ，那么生产环境下的代码可以访问吗？
答案其实不可以访问，生产环境下直接在控制台打印 process.env 会报错。而开发的时候，在浏览器打印这个参数其实是有值的，这个值仅仅是运行时 node 变量的拷贝

问题来了，既然我们不能访问这个参数，那我们在 vue 开发中经常使用的一个参数 process.env.NODE_ENV，在生产代码下，是怎么样的呢？比如下面的代码：

const isDevelopment = process.env.NODE_ENV === "development" ? true : false;

要是 webpack 原封不动的将这段代码打包成生产代码，那肯定是报错的，因为不存在 process 变量，所以访问它的属性，会产生引用错误Uncaught ReferenceError: process is not definedat
实际上 process.env.NODE_ENV 会在打包的时候，直接变成相应的字符串替代，比如上述代码大致应该是这样：

const isDevelopment = "product" === "development" ? true : false; 

实际上不只是 vue-cli ，大部分采用 webpack 构建的项目，webpack 都设置了 process.env.NODE_ENV ，你可以访问它来区分环境，比如 react 的构建工具 create-react-app