vue-cli3.0设置环境变量与模式的方法

概述

       Vue脚手架作为当前最炽手可热的框架，各种配置使用起来也是非常方便，比如开发、测试以及生产环境会有不能的api接口服务地址、打包分流、也可到项目的任意页面直接使用process.env.NODE_ENV获取全局变量等等，通过环境变量与模式可以很好的配合我们开发，减少不必要的疏漏和工作量。

1、创建项目

       通过vue-cli 3.0创建项目，如何安装vue-cli，请移步进vue-cli官网

vue create project-name

2、环境变量与模式所需的文件

.env.dev // 开发环境
.env.prod // 生产环境
.env.test // 测试环境

       新建文件如下图：

       文件变量声明如下图（声明了一个环境变量 NODE_ENV）：

3、package.json文件里面设置—mode关联绑定环境配置文件

        scripts里面的变量是核心

{
  "name": "eslint-standard",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build.test": "vue-cli-service build --mode test",
    "build": "vue-cli-service build --mode prod"
  }
}

4、vue.config.js设置输出目录

module.exports = {
  lintOnSave: false,
  outputDir: `dist-${process.env.NODE_ENV}`
}

5、最后分别执行命令检查配置是否成功

npm run build.test
npm run build

       结果显示正常输出了文件夹以及文件，如果报错那就检查下自己的配置是否正确：