1.前言

1.不管讲多少遍,对这个不同的环境中 baseURL的配置还是很懵

2.今天在单独开篇文章写下吧

3.vue-cli 模式环境变量 官方说明

4.process 说明

5.最新脚手架 vue/clie 4x

2.模式

3. 环境变量

1.

2.请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

4.新建环境变量文件

1.

.env.development

.env.test

.env.production

2.根据自己的情况新建 可以建好多个

VUE_APP_BASE_URL = 'http://yzs.com/production/'
VUE_APP_UpLOAD_URL = 'http://yzs.com/uload/'
VUE_APP_DOWN_LOAD_URL = 'http://yzs.com/download/'

5. package.json配置

1.配置

2. 代码

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode test",
    "pro": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },

这个 mode和 上述新建的环境变量名字保持一致

3. 测试的话可以把 serve 对应的模式变为 test

"serve": "vue-cli-service serve --mode test",

效果

1.

6.使用

1. 这里放在了请求拦截 相应拦截的封装当中

console.log('-------process-----', process.env.VUE_APP_BASE_URL)
console.log('-------env-----', process.env)
const service = axios.create({
    timeout: 5000,    //超时时间
    baseURL:process.env.VUE_APP_BASE_URL                               
    transformRequest: data => qs.stringify(data)    //post请求参数处理,防止post请求跨域
})

7. 后记

纸上得来终觉浅,绝知此事要躬行