一、.env配置用于区分生产环境和开发环境

一个vue-cli项目有三个模式：

development(开发环境)模式，用于vue-cli-service  serve。

production(生产环境)模式，用于vue-cli-service  build  和  vue-cli-service test:e2e。

test(测试环境)模式，用于vue-cli-service test:unit。

在根项目》package.json下修改
{
  ...
  "scripts":{
      ...
      "test":"vue-cli-service test:unit"
  }
  ...
}

一个模式可以包含多个环境变量。

也就是说，每个模式都会将NODE_ENV的值设置为模式的名称。比如在development模式下NODE_ENV的值会被设置为“development”。在production模式下NODE_ENV的值会被设置为“production”。

我们可以通过为.env文件增加后缀，来设置某个模式下特有的环境变量。

比如，在项目根目录下创建一个名为.env.development文件，那么在这个文件里面声明过的变量，就只会在development模式下被载入。

比如，在项目根目录下创建一个名为.env.production文件，那么在这个文件里面声明过的变量，就只会在production模式下被载入。

如果这个环境变量想同时在所有模式下被载入，可以声明在.env文件里。

注意一下环境变量声明的命名规范，只有以VUE_APP_开头的变量，会被webpack.DefinePlugin静态嵌入到客户端的包中。

（如果配置时项目正在运行，配置完成后需要结束项目，再次运行项目，才能生效。）

在根目录下》.env中添加代码

VUE_APP_DOMAIN=http://www.baidu.com
VUE_APP_TITLE=百度搜索

在根目录下》.env.development中添加代码

VUE_APP_DOMAIN=http://dev.baidu.com

在根目录下》.env.production中添加代码

VUE_APP_DOMAIN=http://production.baidu.com

在根目录》src》App.vue中修改代码：

<script>
...
export default{
    ...
    created(){
        console.log(process.env.VUE_APP_DOMAIN)

        console.log(process.env.VUE_APP_TITLE)

} } </script>

输入以下命令，在控制台输出http://dev.baidu.com

npm  run  serve

输入以下命令，在控制台输出http://production.baidu.com

npm run build
serve -s dist

 

实际应用在接口地址。不同环境下使用不同的接口地址，显示不同的数据。

只需要在这三个文件里面统一变量名，然后在不同文件里面改变变量的值就可以了。