二、多环境配置

在实际开发中不可能只有开发环境和生产环境，根据业务需求需要自己定义环境，比如测试环境、预览环境等。接下来自己定义一个测试环境。

 

首先在根目录创建.env.test（test名字随便写）文件。文件内容如下：

VUE_APP_API=http://test.baidu.com

接下来在package.json文件中，新增代码如下：

（ "build:test"是自定义属性，属性名随意起。属性值"vue-cli-service build --mode test"，表示执行 .env.test文件中的环境变量并打包生成文件。）

（注意 --mode参数后面的 test名称必须和 .env.test后缀名称相同。）

{
 "script":{
   ...
   "build:test":"vue-cli-service build --mode test"
  }
}

在App.vue文件中，新增代码如下：

<script>
export default={
    ...
    created(){
        console.log(process.env.VUE.APP.API)
    }
}
</script>

输入以下命令，即可构建演示版本

npm run build:test

输入以下命令，即可运行演示版本

serve -s dist

 

 

实际应用：产品经理让你做一个演示版本或者测试版本，后端会提供演示接口地址或者测试接口地址。

然后你npm build就可以构建发布版本，再把它上传到服务器上。大家看到的数据就是演示版数据。