vue-cli2与vue-cli3/4的区别

1.vue-cli命令不同

2.项目结构不同

vue-cli3/cli4中移除了配置文件目录：config 和 build 文件夹。

同时移除了 static 静态文件夹，新增了 public 文件夹，将 index.html 移动到 public 中。

3.设置环境变量

vue-cli3构建的项目中默认只有development模式和production模式，默认的NODE_ENV分别是development和production，很多配置也只依据NODE_ENV区分这2种模式。

但当我们需要其他模式，如测试模式时，就需要添加相关配置。

详细设置过程，推荐看：vue-cli如何添加多种环境变量

补充：

在 .env.[mode] 模式文件中，三个环境变量及其含义：

• NODE_ENV（对应当前模式的名称）
• VUE_APP_RUNTIME_ENV（对应当前环境的名称）
• VUE_APP_BASE_URL（当前环境向后台发请求的baseurl）

使用环境变量：

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

在js文件或者在vue文件中process.env.{环境变量名}，比如上文定义的VUE_APP_BASE_URL，使用rocess.env.VUE_APP_BASE_URL即可获取环境变量的值。

在html文件中使用环境变量，采用模板引用指令<%= process.env.process.env.{环境变量名} %>，比如

<script src="xxx.com" app_id="<%= process.env.process.env.MY_APP_ID %>"/>