[vue]在vue-cli3.x中配置代理和环境变量

最近了解了一下vue脚手架，发现它的build和config文件夹没有了，我们以前配置反向代理和环境变量都是在这两个文件夹中完成的，那么现在要怎么办呢？
查了一下api发现，在vue-cli3.x中它把以前与webpack有关的文件全部集合起来了，我们只需要在根目录下操作vue.config.js即可（如果根目录下没有则自己创建一个）。
1，代理的配置：
基本的写法和之前一样，如图：

module.exports = {
  devServer: {
    // 设置代理
    proxy: {
      "/api": {
        target: "http://127.0.0.1:8081/", // 域名
        ws: true, // 是否启用websockets
        changOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRequiresRewrite: {
          "^/api": "/"
        }
      }
    }
  }
};

2，环境变量的配置：
在vue-cli3.x中已经为我们配置好了三种模式：

• development 模式用于 vue-cli-service serve
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
• test 模式用于 vue-cli-service test:unit

所以我们只需要判断是什么模式即可：

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

使用方法与之前一样。

哈哈，感谢楼主的分享