image.png

cli3有三个环境配置文件：

development:开发环境

prod: 正式环境

testing: 测试环境

image.png

而VUE_CLI_BABEL_TRANSPILE_MODULES:true是为了路由懒加载，在cli2时需要在package.json里面加上

  "env": {
    "development": {
      "plugins": ["dynamic-import-node"]
    }
  }
}

而在新版本只要配置改设置就可
vue-cli@3
vue-element-admin@4 在新版本中已修改为基于 vue-cli来进行构建。所以在新版本中你只要在.env.development环境变量配置文件中设置VUE_CLI_BABEL_TRANSPILE_MODULES:true就可以了，具体代码。
它的实现逻辑和原理与之前还是一样的，还是基于babel-plugin-dynamic-import-node来实现的。之所以在vue-cli中只需要设置一个变量就可以了，是借用了vue-cli它的默认配置，它帮你代码都写好了。通过阅读源码可知，vue-cli会通过VUE_CLI_BABEL_TRANSPILE_MODULES这个环境变量来区分是否使用babel-plugin-dynamic-import-node，所以我们只要开其它就可以。虽然它的初衷是为了单元测试的，但正好满足了我们的需求。

回归正题：

测试服配置：

NODE_ENV = "testing"

# just a flag
ENV = 'testing'

# base api
VUE_APP_BASE_API = 'https://api.qkb-test.admin.mjc.com'

正式服配置：

NODE_ENV = "production"

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = 'https://api.qkb.admin.mjc.com'

开发环境配置：

NODE_ENV = "development"

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/api'

VUE_CLI_BABEL_TRANSPILE_MODULES = true

所以只需要在请求拦截器的request里面设置baseURL就可以了

// 创建AXIOS实例
const service = axios.create({
  // baseURL: basePath, 
  baseURL: process.env.VUE_APP_BASE_API,
  headers:{'X-TOKEN':localStorage.getItem('token')},
  withCredentials: true, // 跨域请求时发送cookie
  timeout: 30000, // request timeout
})

切记需要前缀process.env，该属性可以在任何界面调用，如console.log(process.env)
或者在element-ui 的upload组件中，action属性需要绑定url,也可以使用如下：

  <el-upload
                 ref="my-upload"
                    class="upload-demo"
                    :action="process+'/upload_img'"
                    :on-success="onSuccess1"
                    :file='tupian'
                    :with-credentials="true"
                    list-type="picture">
                    <el-button size="small" type="primary" class='upload-button'>+</el-button>
                </el-upload>

在data属性中规定process为

 data() {
    return {
      process:process.env.VUE_APP_BASE_API,
}}

就可以根据环境同，来自动区分上传的地址。